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Prefacio 


El  objetivo  de  este  libro  es  proporcionar  un  material  teórico  y  práctico  para 
apoyar  la  docencia,  tanto  presencial,  desarrollada  en  clases  de  teoría  o  en  labora¬ 
torio,  como  no  presencial,  proporcionando  al  estudiante  un  material  que  facilite  el 
estudio  de  la  materia,  de  un  nivel  y  contenido  adecuado  para  la  asignatura  Infor¬ 
mática  Gráfica  del  grado  en  Diseño  y  Desarrollo  de  Videojuegos  de  la  Universitat 
Jaume  I.  Este  libro  pretende  ser  el  complemento  ideal  a  las  explicaciones  que  el 
profesor  imparta  en  sus  clases,  no  su  sustituto,  y  del  cual  el  alumno  deberá  mejorar 
el  contenido  con  sus  anotaciones. 

Informática  Gráfica  segunda  edición  es  un  libro  que  renueva  la  obra  publicada 
en  el  año  2015  de  título  Informática  Gráfica,  número  107  de  la  colección  Sapientia. 
Por  una  parte,  se  ha  pasado  a  utilizar  WebGL  2.0  cuya  especificación  apareció  a 
principios  del  2017,  mucho  más  moderna  que  la  versión  1.0,  la  cual  está  basada  en 
una  especificación  de  hace  más  de  diez  años.  Por  otra  parte,  se  han  realizado  mejo¬ 
ras  en  todos  los  capítulos  incluyendo  cambios  en  prácticamente  todas  sus  seccio¬ 
nes,  nuevas  figuras,  más  ejemplos  y  ejercicios,  y  una  nueva  sección  de  cuestiones 
al  final  de  cada  capítulo. 

El  contenido  del  libro  se  puede  dividir  en  tres  bloques.  El  primer  bloque  lo 
formarían  los  primeros  cuatro  capítulos  en  los  que  se  introduce  la  programación 
moderna  de  gráficos  por  computador  a  través  de  la  interfaz  de  programación  de 
hardware  gráfico  WebGL  2.0,  el  modelado  y  visualizado  de  modelos  poligonales, 
el  uso  de  transformaciones  geométricas,  transformaciones  de  cámara  y  proyec¬ 
ción,  y  el  problema  de  la  visibilidad.  El  segundo  bloque  se  centra  principalmente 
en  introducir  técnicas  para  mejorar  la  calidad  visual  de  la  imagen  sintética  y  lo 
formarían  los  capítulos  5  a  7.  En  este  bloque  se  incluye,  por  ejemplo,  el  modelo  de 
iluminación  de  Phong,  modelos  de  sombreado,  diversas  técnicas  para  la  aplicación 
de  texturas  e  implementación  de  texturas  procedurales  básicas.  El  tercer  y  último 
bloque  del  libro  lo  forman  los  capítulos  8  a  10  que  principalmente  presentan  técni¬ 
cas  avanzadas  de  realismo  visual,  como  transparencia,  espejos  y  sombras,  métodos 
relacionados  con  el  desarrollo  de  aplicaciones  gráficas  como,  por  ejemplo,  meca¬ 
nismos  de  interacción  y  animación  con  shaders ,  y  métodos  de  procesamiento  de 
imagen  como  la  corrección  gamma  o  filtros  de  convolución. 
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Recursos  en  línea 


Se  ha  creado  el  sitio  web  http://cphoto.uji.es/grafica2  como 
apoyo  a  este  material,  donde  el  lector  puede  descargar  los  programas  de  ejemplo 
que  se  incluyen  en  los  diferentes  capítulos. 
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Capítulo  1 

Introducción  a  WebGL 
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WebGL  es  una  interfaz  de  programación  de  aplicaciones  (api)  para  generar 
imágenes  por  ordenador  en  páginas  web.  Permite  desarrollar  aplicaciones  interac¬ 
tivas  que  producen  imágenes  en  color  de  alta  calidad  formadas  por  objetos  tridi¬ 
mensionales  (véase  figura  [LT]).  Además,  WebGL  solo  requiere  de  un  navegador 
que  lo  soporte,  por  lo  que  es  independiente  tanto  del  sistema  operativo  como  del 
sistema  gráfico  de  ventanas.  En  este  capítulo  se  introduce  la  programación  con 
WebGL  a  través  de  un  pequeño  programa  y  se  presenta  el  lenguaje  GLSL  para  la 
programación  de  shaders. 


Figura  1.1:  Ejemplo  de  escena  tridimensional  dibujada  con  WebGL 
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1.1.  Antecedentes 


OpenGL  se  presentó  en  1992.  Su  predecesor  fue  Iris  GL,  un  API  diseñado  y  so¬ 
portado  por  la  empresa  Silicon  Graphics.  Desde  entonces,  la  OpenGL  Architecture 
Review  Board  (arb)  conduce  la  evolución  de  OpenGL,  controlando  la  especifica¬ 
ción  y  los  tests  de  conformidad. 

En  sus  orígenes,  OpenGL  se  basó  en  un  pipeline  configurable  de  funcionamien¬ 
to  fijo.  El  usuario  podía  especificar  algunos  parámetros,  pero  el  funcionamiento  y 
el  orden  de  procesamiento  era  siempre  el  mismo.  Con  el  paso  del  tiempo,  los  fa¬ 
bricantes  de  hardware  gráfico  necesitaron  dotarla  de  mayor  funcionalidad  que  la 
inicialmente  concebida.  Así,  se  creó  un  mecanismo  para  definir  extensiones  que, 
por  un  lado,  permitía  a  los  fabricantes  proporcionar  hardware  gráfico  con  mayores 
posibilidades,  al  mismo  tiempo  que  ofrecían  la  capacidad  de  no  realizar  siempre  el 
mismo  pipeline  de  funcionalidad  fija. 

En  el  año  2004  aparece  OpenGL  2.0,  el  cual  incluiría  el  OpenGL  Shading  Lan- 
guage,  GLSL  1.1,  e  iba  a  permitir  a  los  programadores  la  posibilidad  de  escribir 
un  código  que  fuese  ejecutado  por  el  procesador  gráfico.  Para  entonces,  las  princi¬ 
pales  empresas  fabricantes  de  hardware  gráfico  ya  ofrecían  procesadores  gráficos 
programables.  A  estos  programas  se  les  denominó  shaders  y  permitieron  incre¬ 
mentar  las  prestaciones  y  el  rendimiento  de  los  sistemas  gráficos  de  manera  espec¬ 
tacular,  al  generar  además  una  amplia  gama  de  efectos:  iluminación  más  realista, 
fenómenos  naturales,  texturas  procedurales,  procesamiento  de  imágenes,  efectos 
de  animación,  etc.  (véase  figura [L2|). 


Figura  1.2:  Ejemplos  de  objetos  dibujados  mediante  shaders 


Dos  años  más  tarde,  el  consorcio  ARB  pasó  a  ser  parte  del  grupo  Khronos.  [] 
Entre  sus  miembros  activos,  promotores  y  contribuidores  se  encuentran  empresas 
de  prestigio  internacional  como  AMD,  Apple,  arm,  Epic  Games,  Google,  Huawei, 
Qualcomm,  Nvidia,  Intel,  Nokia,  etc.  Es  en  el  año  2008  cuando  OpenGL,  con  la 
aparición  de  OpenGL  3.0  y  GLSL  1.3,  adopta  el  modelo  de  obsolescencia,  aunque 

!http : / / www . khronos . org/ 
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manteniendo  compatibilidad  con  las  versiones  anteriores.  Sin  embargo,  en  el  año 
2009,  con  las  veriones  de  OpenGL  3.1  y  GLSL  1.4,  es  cuando  probablemente  se 
realiza  el  cambio  más  significativo;  el pipeline  de  funcionalidad  fija  y  sus  funciones 
asociadas  son  eliminadas,  aunque  disponibles  aún  a  través  de  extensiones  que  están 
soportadas  por  la  mayor  parte  de  las  implementaciones. 

OpenGL  ES  1.0  aparece  en  el  2003.  Se  trata  de  la  primera  versión  de  OpenGL 
para  sistemas  empotrados  incluyendo  teléfonos  móviles,  tabletas,  consolas,  vehícu¬ 
los,  etc.  Se  basó  en  la  especificación  inicial  de  OpenGL.  La  versión  2.0  creada  a 
partir  de  la  especificación  de  OpenGL  2.0  aparece  en  el  2007,  eliminando  parte  de 
la  funcionalidad  fija  y  permitiendo  la  programación  con  shaders.  Esta  versión,  so¬ 
portada  en  sistemas  Android  desde  la  versión  2  e  IOS  desde  la  versión  5,  es  la  base 
para  la  especificación  de  WebGL  1.0  que  aparece  en  el  201 1  y  que  en  la  actualidad 
está  ampliamente  soportada  por  los  navegadores  Safari,  Chrome,  Firefox,  Opera  e 
Internet  Explorer,  entre  otros.  Derivada  de  OpenGL  3.3,  la  primera  especificación 
de  OpenGL  ES  3.0  se  hace  pública  en  el  2013  y  está  soportada  en  sistemas  Android 
desde  la  versión  4.3  e  IOS  desde  su  versión  7.  A  su  vez,  esta  nueva  versión  es  la 
base  para  la  especificación  de  WebGL  2.0  que  ve  finalmente  la  luz  en  el  año  2017. 


1.2.  Prueba  de  WebGL 

Averiguar  si  se  dispone  de  soporte  para  WebGL  es  muy  simple.  Abre  un  nave¬ 
gador  y  accede  a  cualquiera  de  las  muchas  páginas  que  informan  de  si  el  navegador 
soporta  o  no  WebGL.  Por  ejemplo,  la  página  http  :  /  /get .  webgl .  org  es  una 
de  ellas.  Si  funciona,  se  mostrará  una  página  con  el  dibujo  de  un  cubo  en  alambre 
dando  vueltas  sobre  sí  mismo  como  el  que  aparece  en  la  figura [L3| 


Your  browser  supports  WebGL 

You  should  see  a  spinning  cube.  IFyou  do  not,  please 

visit  the  support  site  for  your  browser. 


Check  out  some  of  the  following  iinks  to  Want  more  information  about  WebCL? 

learn  more  about  WebCL  and  to  find  more 

web  applications  using  WebCL  khronos.oro/webQl 

WebCL  Wiki 


Figura  1.3:  Resultado  con  éxito  del  test  de  soporte  de  WebGL  en  un  navegador  (http :  //get . 
webgl . org) 


23 


(cc)  José  Ribelles  y  Ángeles  López 
W  ISBN:  978-84-17429-87-4 


Informática  Gráfica  (2a  edición) 
DOI:  http://dx.doi.org/! 0.603 5/Sapiential  5 1 


Ejercicios 


►  1.1  Comprueba  la  disponibilidad  de  WebGL  en  los  diferentes  navegadores  que  tengas 
instalados  en  tu  equipo.  Si  tienes  varios  sistemas  operativos  repite  las  pruebas  en  cada  uno 
de  ellos.  Si  tienes  dispositivos  móviles,  teléfonos  o  tabletas  a  tu  alcance,  prueba  también  el 
soporte  con  los  diferentes  navegadores.  Después  de  las  distintas  pruebas: 


■  ¿Cuál  es  tu  opinión  respecto  al  estado  de  soporte  de  WebGL  en  los  diferentes  nave¬ 
gadores? 

■  ¿Crees  que  es  suficiente  o  que  por  contra  tendremos  que  esperar  aún  más  a  que 
aparezcan  nuevas  versiones  de  los  navegadores? 

■  ¿Piensas  que  lo  que  desarrolles  en  WebGL  vas  a  a  tener  que  probarlo  en  cada  nave¬ 
gador  y  sistema  con  el  fin  de  comprobar,  no  solo  su  funcionamiento,  sino  también 
si  se  obtiene  o  no  el  mismo  resultado? 


►  1.2  Accede  a  la  siguiente  web:  http  :  //webgl  report.com/ .  Obtendrás  una  pá¬ 
gina  con  un  contenido  similar  al  que  se  muestra  en  la  figura  1 .4  Aunque  algunas  caracte¬ 
rísticas  te  resulten  incomprensibles,  trata  de  contestar  a  las  siguientes  preguntas: 


■  ¿Cuál  es  la  versión  de  WebGL  que  soporta  tu  navegador? 


■  ¿Cuántos  bits  se  utilizan  en  el  framebujfer  para  codificar  el  color  de  un  píxel? 


►  1.3  Si  realizas  una  búsqueda  en  internet  encontrarás  bastantes  páginas  que  ofrecen 
una  selección  de  ejemplos  y  donde  también  los  desarrolladores  pueden  colgar  sus  propios 
trabajos.  Algunos  ejemplos  son: 

■  Chrome  Experimenté 

■  22  Experimental  WebGL  Demo  Example^ 

■  WebGL  Sample^] 

■  Plus  360  Degree^] 


1.3.  El  mínimo  programa 

Incluir  una  aplicación  WebGL  en  una  página  web  requiere  de  dos  pasos  pre¬ 
vios:  crear  un  canvas  y  obtener  un  contexto  WebGL.  Como  ya  sabes,  HTML  es  un 
lenguaje  estandard  que  se  utiliza  para  el  desarrollo  de  páginas  y  aplicaciones  web. 
La  versión  html5  incluye  entre  sus  nuevos  elementos  el  denominado  canvas.  Se 
trata  de  un  elemento  rectangular  que  establece  el  área  de  la  página  web  donde  se 
visualizará  la  aplicación  WebGL.  El  listado  [TT]  muestra  el  código  HTML  que  crea 
un  canvas  de  tamaño  800  x  600. 

^http : / /www . chromeexperiment s . com/ 

~http : / /www . awwwards . com/22-experimental-webgl-demo-examples . 
html 

Hhttp : / /webgl s ampies . org/ 

“http : / /www . plus 3  60degrees . com/ 
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Platform: 

Browser  User  Agent: 

Context  Ñame: 

GL  Versión: 

Shading  Language  Versión: 
Vendor: 

Renderer: 

Unmasked  Vendor: 
Unmasked  Renderer: 
Antialiasing: 

ANGLE: 

Major  Performance  Caveat: 


Linux  x86_64 

Mozilla/5.0  (Xll;  Linux  x86_64)  AppleWebKit/537.36  (KHTML,  like  Gecko) 

Chrome/60.0.3112.113  Safari/537.36 

webgl2 

WebGL  2.0  (OpenGL  ES  3.0  Chromium) 

WebGL  GLSL  ES  3.00  (OpenGL  ES  GLSL  ES  3.0  Chromium) 

WebKit 

WebKit  WebGL 

NVIDIA  Corporation 

GeForce  GT  630/PCIe/SSE2 

Available 

No 

No 


Figura  1.4:  Resultado  de  la  página  http  :  //webglreport .  org  que  proporciona  información 
sobre  algunas  propiedades  relativas  al  soporte  de  WebGL  2.0  en  el  navegador. 
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Ejercicios 


►  1.4  Examina  el  listado  |TTT|  utiliza  un  editor  para  escribirlo  y  guárdalo  con  el  nombre 
canvas.html.  Ahora  ábrelo  con  el  navegador  que  hayas  seleccionado  para  trabajar.  Prueba  a 
cambiar  algunos  de  los  parámetros  como  el  tamaño,  el  tipo  de  borde,  o  su  color.  Realmente, 
que  el  marco  sea  visible  no  es  necesario,  pero  de  momento  facilita  ver  claramente  cuál  es 
el  área  de  dibujo  establecida. 


Listado  1.1:  Ejemplo  de  creación  de  un  canvas  con  HTML5 

<  ¡DOCTYPE  html  > 

<html  > 

<head> 

<meta  charset  =  "  utf  —  8"> 

< t i 1 1 e  >  Canvas  </ 1 i 1 1  e  > 

<style  type=" text / css "> 

canvas  {border:  lpx  solid  black;} 

</ style  > 

</head> 

<body > 

<canvas  id  =  " myCanvas "  width  =  "800"  height  =  " 600 "> 

El  Navegador  no  soporta  HTML5 
</canvas  > 

</body > 

</html> 


También  es  el  propio  canvas  el  que  nos  va  a  proporcionar  un  contexto  WebGL, 
objeto  JAVASCRIPT  a  través  del  cual  se  accede  a  toda  la  funcionalidad.  Siempre 
crearemos  primero  el  canvas  y  entonces  obtendremos  el  contexto  WebGL.  Observa 
el  código  del  listado [L2| que  trata  de  obtener  un  contexto  WebGL  2.0  e  informa  de 
su  disponibilidad. 


Ejercicios 


►  1.5  Examina  el  listado  1.2  utiliza  un  editor  para  escribirlo  y  guárdalo  como  contex- 
to.js.  Ahora  recupera  canvas.html  y  añade  el  script  justo  antes  de  cerrar  el  cuerpo  de  la 
página  web  (etiqueta  </body>): 

■  <script  src=  ”  contexto  .  j  s”  ><  /script> 


Guárdalo  y  refresca  la  página  en  el  navegador.  Comprueba  el  resultado,  ¿tienes  soporte 
para  WebGL  2.0? 


Observa  ahora  la  nueva  función  initWebGL  del  listado 


1.3 


Esta  función  es¬ 


pecifica  un  color  de  borrado,  o  color  de  fondo,  utilizando  el  método  clearColor , 
y  ordena  que  borre  el  contenido  del  canvas  con  la  orden  clear  y  el  parámetro 
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COLOR_BUFFER_BIT .  Ambas  instrucciones  son  ya  órdenes  de  WebGL.  Cabe  se¬ 
ñalar  que  aunque  este  programa  contiene  la  mínima  expresión  de  código  que  utiliza 
WebGL,  la  estructura  habitual  de  un  programa  que  utilice  WebGL  se  corresponde 


con  el  que  se  muestra  más  adelante  en  el  listado  2.4 


Listado  1.2:  Código  JAVASCRIPT  para  obtener  un  contexto  WebGL  2.0 
function  getWebGLContext  ()  { 

var  canvas  =  document .  getElementByld  ( "myCanvas " )  ; 

try  { 

return  canvas  .  getContext("  webgl2 " )  ; 

} 

catch(e)  { 

} 

return  nuil  ; 


function  initWebGLQ  { 

var  gl  =  getWebGLContext  ()  ; 
if  ( •  gl )  { 

alert(  "WebGL  2.0  no  está  disponible"); 
}  else  { 

alert(  "WebGL  2.0  disponible"); 

} 

} 

initWebGL  ()  ; 


Listado  1.3:  Código  que  utiliza  órdenes  de  WebGL 
function  initWebGLQ  { 

var  gl  =  getWebGLContext  ()  ; 

if  ( •  gl )  { 

alert(  "WebGL  2.0  no  está  disponible"); 

return  ; 

i 

//  especifica  en  RGBA  el  color  de  fondo  (4  valores  entre  0  y  1) 
gl  .  clearColor  (1.0  , 0 . 0  , 0 . 0  , 1 . 0)  ; 

//  rellena  el  buffer  de  color  utilizando  el  color 
//  especificado  con  la  orden  clearColor 
gl  .  clear  (  g  1  .  COLOR_BUFFER_BIT )  ; 

} 
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Ejercicios  - 

►  1.6  Ejecuta  el  programa  cOl/minimoP rograma.html  que  implementa  la  función  init- 
WebGL  del  listado [L3|  Consulta  en  la  guía  de  programación  de  WebGL  las  órdenes  clear 
y  clear  Color  y  contesta  a  las  siguientes  cuestiones: 

■  ¿Qué  has  de  cambiar  para  que  el  color  de  fondo  sea  amarillo? 

■  ¿Qué  ocurre  si  intercambias  el  orden  de  clear  y  clearColorl  ¿Por  qué? 


1.4.  El  primer  triángulo 


El  listado 


1.4 


muestra  la  nueva  función  initShader  cuyo  objetivo  es  compilar  y 


enlazar  un  shader.  Pero,  ¿qué  es  un  shaderl  Un  shader  no  es  más  que  un  programa 
que  se  ejecuta  en  la  GPU.  En  la  actualidad,  una  GPU  puede  llegar  a  contener  hasta 
cinco  tipos  de  procesadores:  de  vértices,  de  control  de  teselación,  de  evaluación 
de  teselación,  de  geometría  y  de  fragmentos;  por  lo  que  también  decimos  que  hay 
cinco  tipos  de  shaders ,  uno  por  cada  tipo  de  procesador.  Sin  embargo,  WebGL  2.0 
solo  soporta  dos  tipos  de  shaders ,  el  de  vértices  y  el  de  fragmentos,  de  modo  que 
únicamente  podremos  escribir  shaders  de  vértices  y  shaders  de  fragmentos. 

Un  shader ,  antes  de  poder  ser  ejecutado  en  una  GPU,  debe  ser  compilado  y 
enlazado.  El  compilador  está  integrado  en  el  propio  driver  de  OpenGL  instalado 
en  tu  máquina  (ordenador,  teléfono,  tableta,  etc.).  Esto  implica  que  la  aplicación 
en  tiempo  de  ejecución  será  quien  envíe  el  código  fuente  del  shader  al  driver  para 
que  sea  compilado  y  enlazado,  creando  un  ejecutable  que  puede  ser  instalado  en  la 
GPU.  Tres  son  los  pasos  a  realizar: 


1.  Crear  y  compilar  los  objetos  shader. 

2.  Crear  un  programa  y  añadirle  los  objetos  compilados. 

3.  Enlazar  el  programa  creando  un  ejecutable. 


Ejercicios 


►  1.7  El  listado  |1.4|  muestra  un  ejemplo  de  todo  el  proceso.  Observa  detenidamente 
la  función  initShader  e  identifica  en  el  código  cada  una  de  las  tres  etapas.  Consulta  la 
especificación  de  WebGL  para  conocer  más  a  fondo  cada  una  de  las  órdenes  que  aparecen 
en  el  ejemplo.  Señalar  que  para  que  el  programa  ejecutable  sea  instalado  en  los  proce¬ 
sadores  correspondientes,  es  necesario  indicarlo  con  la  orden  glUseProgram ,  que  como 
parámetro  debe  recibir  el  identificador  del  programa  que  se  desea  utilizar.  La  carga  de  un 
ejecutable  siempre  supone  el  desalojo  del  que  hubiera  con  anterioridad. 

►  1.8  Edita  el  fichero  cOl/miPrimerTrianguloConWebGL.js.  Observa  cómo  queda  in¬ 
cluida  la  función  initShader  dentro  de  la  aplicación  y  en  qué  momento  se  le  llama  desde  la 
función  initWebGL. 
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Listado  1.4:  Compilación  y  enlazado  de  un  shader 
function  initShaderQ  { 

//  paso  1 

var  vertexShader  =  gl  .  createS hader  (  gl  .  VERTEX_SHADER)  ; 
gl  .  shaderSource  (  vertexShader  , 

document .  getElementByld  (  ’  my  VertexShader  ’ )  .  text )  ; 
gl  .  compileShader  (  vertexShader  )  ; 

var  fragmentShader  =  gl  .  createShader  (  gl  .FRAGMENT_SHADER)  ; 
gl  .  shaderSource  (  fragmentShader  , 

document .  getElementByld  (  ’  my  FragmentShader  ’ )  .  text )  ; 
gl  .  compileShader  (  fragmentShader  )  ; 

//  paso  2 

program  =  gl  .  createProgram  ()  ; 

gl  .  attachShader  ( program  ,  vertexShader)  ; 

gl  .  attachShader  ( program  ,  fragmentShader)  ; 

//  paso  3 

gl  .  linkProgram  ( program )  ; 
gl  .  useProgram  ( program )  ; 

program  .  vertexPo sition Attribute  =  gl  .  get AttribLocation  ( 
program,  "  VertexPo  sition  ")  ; 

gl  .  enableVertexAttribArray( program  .  vertexPo sitionAttribute)  ; 


El  listado [T3]muestra  un  ejemplo  de  shader ,  el  más  simple  posible.  Los  scripts 
identificados  como  myVertexShader  y  myFragmentShader  contienen  los  códigos 
fuente  del  shader  de  vértices  y  del  shader  de  fragmentos  respectivamente.  Estos 
scripts  se  deben  incluir  en  el  fichero  HTML. 

Cuando  desde  la  aplicación  se  ordene  dibujar  un  modelo  poligonal,  cada  vértice 
producirá  la  ejecución  del  shader  de  vértices,  el  cual  a  su  vez  produce  como  sali¬ 
da  la  posición  del  vértice  que  se  almacena  en  la  variable  predefinida  gl_Position. 
El  resultado  de  procesar  cada  vértice  atraviesa  el  pipeline ,  los  vértices  se  agrupan 
dependiendo  del  tipo  de  primitiva  a  dibujar,  y  en  la  etapa  de  conversión  al  rás¬ 
ter  la  posición  del  vértice  (y  también  de  sus  atributos  en  el  caso  de  haberlos)  es 
interpolada,  generando  los  fragmentos  y  produciendo,  cada  uno  de  ellos,  la  ejecu¬ 
ción  del  shader  de  fragmentos.  El  propósito  de  este  último  shader  es  determinar 
el  color  definitivo  del  fragmento.  Siguiendo  con  el  ejemplo,  todos  los  fragmentos 
son  puestos  a  color  verde  (especificado  en  formato  rgba)  utilizando  la  variable 
fragmentColor. 


Ejercicios  - 

►  1.9  Carga  en  el  navegador  el  fichero  cOl/miPrimerTrianguloConWebGL.html  y  com¬ 
prueba  que  obtienes  una  salida  similar  a  la  que  se  muestra  en  la  figura|1.5[ 
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Figura  1.5:  El  primer  triángulo  con  WebGL 


Listado  1.5:  Ejemplo  básico  de  shader  de  vértices  y  shader  de  fragmentos 

<script  id  =  "  my  VertexShader " 

type  =  "x— shader /x—vertex  "># ver sion  300  es 

//  Shader  de  vértices 

//  Declaración  del  atributo  posición 
in  vec3  VertexPo sition  ; 

void  main()  { 

//  se  asigna  la  posición  del  vértice  a 
//  la  variable  pre  definida  gl  _P  o  sition 
gl_Position  =  vec4  (  VertexPo  sition  ,  1.0); 

} 

</  script  > 

<script  id  =  "  myFragmentShader " 

type  =  "x—  shader /x— fragment  "># versión  300  es 

//  Shader  de  fragmentos 

precisión  mediump  float  ; 

out  vec4  fragmentColor ; 

void  main()  { 

//  se  asigna  el  color  verde  a  cada  fragmento 
fragmentColor  =  vec4  (0 . 0 , 1 . 0  ,0 . 0 , 1 . 0)  ; 

} 

</  script  > 
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1.4.1.  El  pipeline 

El  funcionamiento  básico  del  pipeline  se  representa  en  el  diagrama  simplifi¬ 
cado  que  se  muestra  en  la  figura  |1.6|  Las  etapas  de  procesado  del  vértice  y  del 
fragmento  son  programables,  y  es  el  programador  el  responsable  de  escribir  los 
shaders  que  se  han  de  ejecutar  en  cada  una  de  ellas. 


Figura  1.6:  Secuencia  básica  de  operaciones  del  pipeline  de  WebGL 

El  procesador  de  vértices  acepta  vértices  como  entrada,  los  procesa  utilizando 
el  shader  de  vértices  y  envía  el  resultado  a  la  etapa  denominada  «procesado  de  la 
primitiva».  En  esta  etapa,  los  vértices  se  reagrupan  dependiendo  de  qué  primiti¬ 
va  geométrica  se  está  procesando  (punto,  línea  o  triángulo).  También  se  realizan 
otras  operaciones  que  de  momento  se  van  a  omitir.  La  primitiva  pasa  por  una  etapa 
de  «conversión  al  ráster »,  que  básicamente  consiste  en  generar  pequeños  trozos 
denominados  fragmentos  que  todos  juntos  cubren  la  superficie  de  la  primitiva. 

El  procesador  de  fragmentos  determina  el  color  definitivo  de  cada  fragmento 
utilizando  el  shader  de  fragmentos.  El  resultado  se  envía  al  framebuffer  no  sin 
antes  atravesar  algunas  etapas  que  de  momento  también  se  omiten  por  cuestión  de 
claridad. 


1.4.2.  Glsl 


El  lenguaje  glsl  forma  parte  de  WebGL  y  permite  al  programador  escribir  el 
código  que  desea  ejecutar  en  los  procesadores  programables  de  la  GPU.  WebGL 
2.0  utiliza  la  versión  3.0  ES  de  GLSL.  Por  este  motivo  los  shaders  comienzan  con 


la  directiva  #version  30  0  es  (véase  listado  1.5). 


Glsl  es  un  lenguaje  de  alto  nivel,  parecido  al  C,  aunque  también  toma  presta¬ 
das  algunas  características  del  C++.  Su  sintaxis  se  basa  en  el  ANSI  C.  Constantes, 
identificadores,  operadores,  expresiones  y  sentencias  son  básicamente  las  mismas 
que  en  C.  El  control  de  flujo  con  bucles,  la  sentencias  condicionales  if-then-else  y 
las  llamadas  a  funciones  son  idénticas  al  C.  Pero  glsl  también  añade  característi¬ 
cas  no  disponibles  en  C,  entre  otras  se  destacan  las  siguientes: 


■  Tipos  vector:  vec2,  vec3,  vec4 

■  Tipos  matriz:  mat2,  mat3,  mat4 
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■  Tipos  sampler  para  el  acceso  a  texturas:  sampler2D,  samplerCube 

■  Tipos  para  comunicarse  entre  shaders  y  con  la  aplicación:  in,  out,  uniform 

■  Acceso  a  componentes  de  un  vector  mediante:  .xyzw  .rgba  .stpq 

■  Operaciones  vector-matriz,  por  ejemplo:  vecA  a  =  b  *  c,  siendo  b  de  tipo 
vecA  y  c  de  tipo  matA 

■  Variables  predefinidas  que  almacenan  estados  de  WebGL 

Glsl  también  dispone  de  funciones  propias  como,  por  ejemplo,  trigonométri¬ 
cas  (sin,  eos,  tan,  etc.),  exponenciales  (pow,  exp,  sqrt,  etc.),  comunes  ( abs,floor , 
mod,  etc.),  geométricas  (length,  cross,  normalize,  etc.),  matriciales  ( transpose ,  in¬ 
verse,  etc.)  y  operaciones  relaciónales  con  vectores  ( equal ,  lessThan,  any,  etc). 
Consulta  la  especificación  del  lenguaje  para  conocer  el  listado  completo.  También 
hay  características  del  C  que  no  están  soportadas  en  OpenGL,  como  es  el  uso  de 
punteros,  de  los  tipos:  byte,  char,  short,  long  int  y  la  conversión  implícita  de  tipos 
está  muy  limitada.  Del  C++,  glsl  copia  la  sobrecarga  y  el  concepto  de  constructor. 

Por  último  indicar  que  en  GLSL  hay  que  establecer  la  precisión  numérica  de  las 
variables  mediante  el  uso  de  uno  de  estos  tres  calificadores:  lowp,  mediump,  highp. 
Estos  calificadores  se  pueden  utilizar  tanto  en  la  declaración  de  la  variable  como 
de  forma  general  para  todas  las  variables  de  un  determinado  tipo.  Este  último  caso 
se  realiza  mediante  la  sentencia: 


precisión  calificado r_de_precisión  tipo; 


Por  ejemplo,  en  el  listado  1.5  se  ha  utilizado  el  calificador  mediump  para  las  varia¬ 


bles  de  tipo  float.  Sin  embargo,  en  su  lugar  se  podría  haber  utilizado  el  calificador 
de  precisión  directamente  en  la  declaración  de  la  correspondiente  variable: 


■  out  mediump  vec4  f ragmentColor ; 

En  el  shader  de  vértices  todos  los  tipos  tienen  una  precisión  establecida  por  defec¬ 
to.  En  el  shader  de  fragmentos  ocurre  lo  mismo  a  excepción  del  tipo  float,  para  el 
que  es  necesario  que  el  programador  lo  especifique  en  el  propio  shader.  Consulta 
la  especificación  del  lenguaje  para  conocer  el  calificador  establecido  por  defecto 
para  cada  tipo  así  como  la  precisión  numérica  asociada  a  cada  calificador. 


Ejercicios  - 

►  1.10  Modifica  el  color  de  relleno  del  triángulo  del  ejercicio  anterior  por  otro  que  tu 
elijas.  Recuerda  que  el  color  de  cada  fragmento  se  establece  en  el  shader  de  fragmentos 
cuyo  código  fuente  está  en  el  fichero  HTML. 

►  1.11  Aunque  aún  no  se  ha  tratado  el  dibujado  de  geometría,  prueba  a  modificar  las 
coordenadas  de  los  vértices  del  triángulo  definido  en  la  variable  exampleTriangle. 
Por  ejemplo,  trata  de  obtener  el  triángulo  simétrico  respecto  a  un  eje  horizontal.  Prueba 
también  a  especificar  coordenadas  de  magnitud  mayor  que  uno,  e  incluso  a  utilizar  valores 
distintos  de  cero  en  la  componente  Z.  Haz  todas  las  pruebas  que  se  te  ocurran,  es  la  mejor 
manera  de  aprender. 


32 


(cc)  José  Ribelles  y  Ángeles  López 
W  ISBN:  978-84-17429-87-4 


Informática  Gráfica  (2a  edición) 
DOI:  http://dx.doi.org/! 0.603 5/Sapiential  5 1 


Cuestiones 


►  1.1  ¿Qué  es  un  canvas? 

►  1.2  ¿Qué  es  un  contexto  WebGL? 

►  1.3  ¿Creas  primero  el  canvas  y  a  partir  de  él  un  contexto  WebGL  o  al  revés? 

►  1.4  ¿En  qué  lenguaje  se  codifica  la  obtención  de  un  contexto  WebGL,  HTML  o  JavaS¬ 
cript? 

►  1.5  ¿Qué  elemento  de  HTML  te  permite  cargar  un  fichero  que  contenga  código  escrito 
en  JavaScript? 

►  1.6  Explica  para  qué  sirve  la  función  de  WebGL  clearColor.  ¿Cómo  se  comple¬ 
menta  con  la  función  clear?  ¿A  qué  hace  referencia  COLOR_BUFFER_BIT? 

►  1.7  ¿Qué  es  un  shaderl 

►  1.8  ¿Qué  tipos  de  shaders  tienes  disponibles  en  WebGL  2.0? 

►  1.9  ¿Qué  es  un  fragmento?  ¿En  que  tipo  de  shader  se  establece  el  color  definitivo  de 
un  fragmento? 

►  1.10  ¿Qué  variable  ha  de  almacenar  el  color  definitivo  de  un  fragmento? 

►  1.11  ¿Qué  variable  ha  de  almacenar  las  coordenadas  definitivas  resultado  de  procesar 
un  vértice? 

►  1.12  En  el  pipeline  de  WebGL,  ¿qué  se  realiza  antes,  el  procesado  del  vértice  o  el  del 
fragmento? 

►  1.13  ¿En  qué  lenguaje  y  versión  se  escribe  un  shader  para  WebGL  2.0? 

►  1.14  ¿Para  qué  sirve  la  orden  useProgram? 
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Capítulo  2 

Modelado  poligonal 


índice 


2.1.  Representación .  36 


|2.1.1.  Caras  independientes] . 

2.1.2.  Vértices  compartidos| . 

.  37 

.  37 

2.1.3.  Tiras  y  abanicos  de  triángulos! . 

.  39 

12.2.  La  normal| . 

.  41 

2.3.  Mallas  y  WebGL| . 

.  43 

2.3.1.  Preparación  y  dibuj  ado . 

.  44 

2.3.2.  Tipos  de  primitivas  geométricas . 

.  44 

|2.3.3.  Variables  uniform\ . 

.  50 

12.3.4.  Variables  oüt I .  51 


Se  denomina  modelo  al  conjunto  de  datos  que  describe  un  objeto  y  que  pue¬ 
de  ser  utilizado  por  un  sistema  gráfico  para  ser  visualizado.  Hablamos  de  modelo 
poligonal  cuando  se  utilizan  polígonos  para  describirlo.  En  general,  el  triángulo 
es  la  primitiva  más  utilizada,  aunque  también  el  cuadrilátero  se  emplea  en  algunas 
ocasiones  (véase  figura [2d]). 


Figura  2.1:  A  la  izquierda,  objeto  representado  mediante  cuadriláteros  y  a  la  derecha,  objeto  repre¬ 
sentado  mediante  triángulos 
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El  hardware  gráfico  actual  se  caracteriza  por  su  velocidad  a  la  hora  de  pintar 
polígonos.  Los  fabricantes  anuncian  desde  hace  años  tasas  de  dibujado  de  varios 
millones  de  polígonos  por  segundo.  Por  esto,  el  uso  de  modelos  poligonales  para  vi¬ 
sualizar  modelos  3D  en  aplicaciones  interactivas  es  prácticamente  una  obligación. 
Por  contra,  los  modelos  poligonales  representan  las  superficies  curvas  de  manera 
aproximada,  como  se  puede  observar  en  la  figura  |27T|  Sin  embargo,  hay  métodos 
que  permiten  visualizar  un  modelo  poligonal  de  modo  que  este  sea  visualmente 
exacto.  Por  ejemplo,  la  figura |Z2| muestra  la  representación  poligonal  del  modelo 
de  una  copa  en  la  que  se  puede  observar  que  el  hecho  de  que  la  superficie  curva  se 
represente  mediante  un  conjunto  de  polígonos  planos  no  impide  que  la  observemos 
como  si  de  una  superficie  curva  se  tratara. 


Figura  2.2:  Representación  poligonal  de  una  copa  y  resultado  de  su  visualización 


2.1.  Representación 


Normalmente  los  modelos  poligonales  representan  objetos  donde  aristas  y  vér¬ 
tices  se  comparten  entre  diferentes  polígonos.  A  este  tipo  de  modelos  se  les  deno¬ 
mina  mallas  poligonales.  La  figura [23] muestra  varios  ejemplos  (modelos  cortesía 
del  Stanford  Computer  Graphics  Laboratory  Q).  A  la  hora  de  definir  una  estructu¬ 
ra  para  la  representación  de  mallas  poligonales  es  importante  tener  en  cuenta  esta 
característica  para  tratar  de  reducir  el  espacio  de  almacenamiento,  el  consumo  de 
ancho  de  banda  y  el  tiempo  de  dibujado.  La  tabla ; 
de  los  modelos  de  la  figura  |2. 3 1 


2.1 


muestra  los  datos  de  cada  uno 


Bunny 

Armadillo 

Dragón 

#  Vértices 

35.947 

172.974 

435.545 

#Triángulos 

69.451 

345.944 

871.306 

Tabla  2.1:  Datos  de  los  modelos  Bunny,  Armadillo  y  Dragón 


1  http  ://graphics .  stanford.  edu/data/3Dscanrep/ 
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Figura  2.3:  Ejemplos  de  mallas  poligonales,  de  izquierda  a  derecha,  Bunny,  Armadillo  y  Dragón 
(modelos  cortesía  del  Stanford  Computer  Graphics  Laboratory) 


2.1.1.  Caras  independientes 

Este  tipo  de  representación  se  caracteriza  por  almacenar  cada  triángulo  de 
manera  independiente,  como  si  estos  no  compartieran  información  alguna.  Su  es¬ 
tructura  de  datos  (véase  listado  [271])  se  correspondería  con  una  única  lista  de  trián¬ 
gulos,  donde  para  cada  triángulo  se  almacenan  las  coordenadas  de  cada  uno  de  sus 
vértices,  tal  y  como  se  muestra  en  la  figura [2~4} 


Listado  2.1:  Estructura  correspondiente  a  la  representación  de  caras  independientes 
struct  triángulo  { 

vector3  coordenadas [ 3 ] ; 

}  Tri  ángulos  [  nTri  ángulos  ] ; 


2.1.2.  Vértices  compartidos 

En  este  caso  se  separa  la  información  de  los  vértices  y  la  de  los  triángulos  en 
dos  listas  (véase  listado |Z2|).  De  esta  manera,  cada  vértice  compartido  se  almacena 
una  única  vez  y  cada  triángulo  se  representa  mediante  tres  índices  a  la  lista  de 
vértices  (véase  figura [23]). 

La  tabla|2.2|muestra  que  el  uso  de  la  estructura  de  vértices  compartidos  reduce 
a  aproximadamente  la  mitad  el  coste  de  almacenamiendo  que  conlleva  utilizar  la 
estructura  de  caras  independientes. 
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(xl,  yl,  zl)  (x2,  y2,  z2) 


Triángulos^  =  { { xO,  yO,  zO,  xl,  yl,  zl,  x3,  y3,  z3  }, 

{ xl,  yl,  zl,  x4,  y4,  z4,  x3,  y3,  z3  }, 

{ xl,  yl,  zl,  x2,  y2,  z2,  x4,  y4,  z4 }, 

{ x2,  y2,  z2,  x5,  y5,  z5,  x4,  y4,  z4 } } 


Figura  2.4:  Esquema  de  almacenamiento  de  una  malla  poligonal  mediante  la  estructura  de  caras 
independientes 


Listado  2.2:  Estructura  correspondiente  a  la  representación  de  vértices  compartidos 
struct  vértice  { 

float  coordenadas [ 3 ] ; 

}  Vértices  [nVértices]; 

struct  tr i  ángulo  { 

unsigned  int  índices  [3]; 

}  Tri  ángulos  [  nTri  ángulos  ]  ; 


(xO,  yO,  zO) 


(xl,  yl,  zl)  (x2,  y2,  z2) 


VérticesQ  =  { {xO,  yO,  zO}, 
{xl,  yl,  zl}, 
{x2,  y2,  z2}, 
{x3,  y3,  z3}, 
{x4,  y4,  z4}, 
{x5,  y5,  z5} } 


Triángulos[]  =  { { 0,  1,  3  }, 
{1,  4,3}, 
{1,  2,4}, 
{2,  5,4}} 


Figura  2.5:  Esquema  de  almacenamiento  de  una  malla  poligonal  mediante  la  estructura  de  vértices 
compartidos 
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Bunny 

Armadillo 

Dragón 

Caras  independientes 

2.500.236 

12.453.984 

31.367.016 

Vértices  compartidos 

1.264.776 

6.227.016 

15.682.212 

Tabla  2.2:  Costes  de  almacenamiento  en  bytes  de  los  modelos  Bunny,  Armadillo  y  Dragón  asumien¬ 
do  que  un  real  de  simple  precisión  o  un  entero  son  4  bytes 


Ejercicios 


►  2.1  Comprueba  que  los  costes  de  almacenamiento  según  el  tipo  de  estructura  utilizada 


que  se  muestran  en  la  tabla|2.2|son  correctos  dados  los  datos  de  la  tabla [XT 
►  2.2  Obtén  y  compara  los  costes  de  almacenamiento  en  bytes  de  un  tetraedro  utilizando 
los  dos  tipos  de  representación.  Asume  que  almacenar  una  coordenada  o  un  índice  cuesta 
4  bytes. 


2.1.3.  Tiras  y  abanicos  de  triángulos 

Estos  tipos  de  representación  tratan  de  aumentar  las  prestaciones  del  sistema 
gráfico  creando  grupos  de  triángulos  que  comparten  vértices. 

En  el  caso  de  un  grupo  de  tipo  tira  de  triángulos,  los  primeros  tres  vértices  de¬ 
finen  el  primer  triángulo.  Cada  nuevo  vértice  define  un  nuevo  triángulo  utilizando 
ese  vértice  y  los  dos  últimos  del  triángulo  anterior  (véase  figura  [Xó]  derecha). 

En  el  caso  de  un  grupo  de  tipo  abanico  de  triángulos,  su  primer  vértice  repre¬ 
senta  a  un  vértice  común  a  todos  los  triángulos  del  mismo  grupo.  De  nuevo,  los 
tres  primeros  vértices  definen  el  primer  triángulo,  pero  después  cada  nuevo  vérti¬ 
ce  produce  que  se  elimine  el  segundo  vértice  del  triángulo  anterior  y  se  agrege  el 
nuevo  (véase  figura |X6 1 izquierda) . 

También  es  posible  utilizar  tiras  de  triángulos  generalizadas  que  permiten,  por 
ejemplo,  representar  mediante  una  sola  tira  la  malla  de  la  figura  |X7|  Esto  se  con¬ 
sigue  repitiendo  vértices  que  producen  a  su  vez  triángulos  degenerados  (triángulos 
donde  dos  de  sus  vértices  son  el  mismo). 
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AbanicoTriángulosQ  =  { 1,  0,  3,  4,  5,  2  } 


TiraTriangulosQ  =  {  0,  3,  1,  4,  2,  5  } 


Figura  2.6:  Ejemplo  de  abanico  y  tira  de  triángulos 


Figura  2.7:  Representación  de  la  malla  mediante  una  tira  de  triángulos  generalizada 


La  tabla 


2.3 


muestra  para  el  modelo  Bunny  que  el  uso  de  la  tira  de  triángulos 


en  conjunto  con  la  estructura  de  vértices  compartidos  reduce  a  aproximadamente 
un  tercio  el  coste  de  almacenamiendo  comparado  con  utilizar  triángulos  y  la  es¬ 
tructura  de  caras  independientes.  Estos  datos  se  han  obtenido  utilizando  una  única 
tira  de  triángulos  que  representa  toda  la  malla  y  está  compuesta  por  102.997  índi¬ 
ces.  La  tabla  también  muestra  que,  en  este  ejemplo,  el  uso  de  tiras  de  triángulos  ha 
producido  un  incremento  del  50  %  en  el  número  de  imágenes  por  segundo  (Fps) 
independientemente  del  tipo  de  estructura  utilizada. 


Ejercicios  - 

►  2.3  Obtén  la  representación  de  un  tetraedro  mediante  una  única  tira  de  triángulos, 
¿consigues  hacerlo  sin  utilizar  triángulos  degenerados?  Obtén  el  coste  de  almacenamiento 
utilizando  la  estructura  de  vértices  compartidos,  ¿has  reducido  el  coste  al  utilizar  la  tira  de 
triángulos  en  lugar  de  triángulos? 
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►  2.4  Obtén  la  representación  de  la  siguiente  malla  mediante  una  única  tira  de  triángulos 
y  contesta,  ¿cuántos  triángulos  degenerados  has  introducido? 


2  5  8  11 


Primitiva 

Estructura 

Bytes 

Fps 

Triángulo 

Caras  independientes 

2.500.236 

20 

Vértices  compartidos 

1.264.776 

20 

Tira  de  triángulos 

Caras  independientes 

1.235.964 

30 

Vértices  compartidos 

843.352 

30 

Tabla  2.3:  Costes  de  almacenamiento  en  bytes  y  tasas  de  imágenes  por  segundo  ( Fps ,  del  inglés 
frames  per  second)  del  modelo  Bunny  utilizando  diferentes  estructuras  y  primitivas 


2.2.  La  normal 

Un  modelo  poligonal,  además  de  vértices  y  caras,  suele  almacenar  otra  infor¬ 
mación  a  modo  de  atributos  como  el  color,  la  normal  o  las  coordenadas  de  textura. 
Estos  atributos  son  necesarios  para  mejorar  el  realismo  visual.  Por  ejemplo,  en 
la  figura  |2.8|  se  muestra  el  resultado  de  la  visualización  del  modelo  poligonal  de 
una  tetera  obtenido  gracias  a  que,  además  de  la  geometría,  se  ha  proporcionado  la 
normal  de  la  superficie  para  cada  vértice. 

La  normal  es  un  vector  perpendicular  a  la  superficie  en  un  punto.  Si  la  superfi¬ 
cie  es  plana,  la  normal  es  la  misma  para  todos  los  puntos  de  la  superficie.  Para  un 
triángulo  es  fácil  obtenerla  realizando  el  producto  vectorial  de  dos  de  los  vectores 
directores  de  sus  aristas.  Ya  que  el  producto  vectorial  no  es  conmutativo,  es  muy 
importante  establecer  cómo  se  va  a  realizar  el  cálculo  y  también  que  los  vértices 
que  forman  las  caras  se  especifiquen  siempre  en  el  mismo  orden,  para  así  obtener 
todas  las  normales  de  manera  consistente. 
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Figura  2.8:  Visualización  del  modelo  poligonal  de  una  tetera.  En  la  imagen  de  la  izquierda  se  pueden 
obervar  los  polígonos  utilizados  para  representarla 


Ejercicios 


►  2.5  Averigua  cómo  saber  si  todas  las  caras  de  una  malla  de  triángulos  están  definidas 
en  el  mismo  orden  (horario  o  antihorario),  y  cómo  arreglarlo  en  el  caso  de  encontrar  caras 
definidas  en  sentidos  distintos. 

►  2.6  Averigua  cómo  saber  si  una  malla  de  triángulos  es  cerrada  o  si,  por  contra,  presenta 
algún  agujero  como,  por  ejemplo,  ocurre  en  la  copa  de  la  figura|2.2[ 


►  2.7  Observa  la  siguiente  descripción  poligonal  de  un  objeto.  Las  líneas  que  comienzan 
por  v  se  corresponden  con  los  vértices  e  indican  sus  coordenadas.  El  primero  se  referencia 
con  el  número  1  y  los  demás  se  enumeran  de  forma  consecutiva.  Las  líneas  que  comienzan 
por  /  se  corresponden  con  las  caras  e  indican  qué  vértices  lo  forman. 


v  0  0  0 
v  0  0  1 
v  1  0  1 
v  1  00 
vO  1  0 
vO  1  1 
v  1  1  1 
vllO 
f  1  32 
f  143 
f  1  25 
f  2  6  5 
f  3  2  6 
f  3  6  7 
f  3  4  7 
f  4  8  7 
f  4  1  8 
f  1  5  8 


■  Dibújalo  en  papel,  ¿qué  objeto  representa? 

■  ¿Están  todas  sus  caras  definidas  en  el  mismo  orden? 

■  ¿En  qué  sentido  están  definidas,  horario  o  antihorario? 
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■  Obtén  las  tiras  de  triángulos  que  representan  el  objeto,  ¿puedes  conseguirlo  con  solo 
una  tira? 

■  Calcula  la  normal  para  cada  vértice,  ¿qué  problema  encuentras? 


2.3.  Mallas  y  WebGL 

Habitualmente  se  suele  asociar  el  concepto  de  vértice  con  las  coordenadas  que 
definen  la  posición  de  un  punto  en  el  espacio.  En  WebGL,  el  concepto  de  vér¬ 
tice  es  más  general,  entendiéndose  como  una  agrupación  de  datos  a  los  que  se 
denominan  atributos.  Por  ejemplo,  la  posición  y  la  normal  son  dos  de  los  atri¬ 
butos  más  comunes  de  un  vértice.  En  cuanto  al  tipo  de  los  atributos,  estos  pue¬ 
den  ser  reales,  enteros,  vectores,  etc.  Y  respecto  al  número  máximo  de  atribu¬ 
tos  que  un  vértice  puede  tener  en  WebGL  2.0,  se  puede  consultar  con  la  orden 
gl .  getParameter  (gl . MAX_VERTEX_ATTRIBS )  que  habitualmente  retor¬ 
na  16  (que  es  el  valor  mínimo  establecido  por  el  estándar). 

WebGL  no  proporciona  mecanismos  para  describir  o  modelar  objetos  geomé¬ 
tricos  complejos,  sino  que  proporciona  mecanismos  para  especificar  cómo  dichos 
objetos  deben  ser  dibujados.  Es  responsabilidad  del  programador  definir  las  estruc¬ 
turas  de  datos  adecuadas  para  almacenar  la  descripción  del  objeto.  Sin  embargo, 
como  WebGL  requiere  que  la  información  que  vaya  a  visualizarse  se  disponga  en 
vectores,  lo  habitual  es  utilizar  también  vectores  para  almacenar  los  vértices  (sus 
atributos)  y  utilizar  índices  a  dichos  vectores  para  definir  las  primitivas  geométricas 
(véase  listado [23]). 


Listado  2.3:  Modelo  de  un  cubo  definido  con  triángulos  dispuesto  para  ser  utilizado  con  WebGL 


var  exampleCube  =  { 


[-0.5, 

-0.5, 

0.5  , 

0.5  , 

-0.5, 

0.5  , 

0.5  , 

0.5  , 

0.5  , 

-0.5, 

0.5  , 

0.5  , 

-0.5, 

-0.5, 

-0.5, 

0.5  , 

-0.5, 

-0.5, 

0.5  , 

0.5  , 

-0.5, 

-0.5, 

0.5  , 

-0.5] 

0,  1, 

2,  0, 

2,  3, 

1,  5, 

6,  1, 

6,  2, 

3,  2, 

6,  3, 

6,  7, 

5,  4, 

7,  5, 

7,  6, 

4,  0, 

3,  4, 

3,  7, 

4,  5, 

1,  4, 

1,  0] 
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2.3.1.  Preparación  y  dibujado 


En  primer  lugar,  el  modelo  poligonal  se  ha  de  almacenar  en  buffer  objects.  Un 
buffer  object  no  es  más  que  una  porción  de  memoria  reservada  dinámicamente  y 
controlada  por  el  propio  procesador  gráfico.  Siguiendo  con  el  ejemplo  del  listado 
2.3|se  necesitan  dos  buffers ,  uno  para  el  vector  de  vértices  y  otro  para  el  de  índices. 


Después  hay  que  asignar  a  cada  buffer  sus  datos  correspondientes.  El  listado  2.4 


recoge  estas  operaciones  en  la  función  initBuffers ,  examínalo  y  acude  a  la  especi¬ 
ficación  del  lenguaje  para  conocer  más  detalles  de  las  funciones  utilizadas. 

El  listado  [23]  muestra  el  código  HTML  que  incluye  dos  scripts ,  uno  para  cada 
tipo  de  shader ,  el  de  vértices  y  el  de  fragmentos.  Observa  que  en  el  shader  de 
vértices  se  define  un  único  atributo  de  posición  para  cada  vértice  (utilizando  la  pa¬ 
labra  clave  in).  El  segundo  paso  consiste  en  obtener  los  índices  de  las  variables 
del  shader  que  representan  los  atributos  de  los  vértices  (que  de  momento  es  solo  la 
posición)  y  habilitar  el  vector  correspondiente.  Estas  operaciones  se  muestran  en  el 
listado  [2~4]  y  se  han  incluido  al  final  de  la  función  initShaders ,  que  es  la  encargada 
de  compilar,  enlazar  y  crear  un  ejecutable  del  shader. 

Una  vez  que  el  modelo  ya  se  encuentra  almacenado  en  la  memoria  controlada 
por  la  GPU,  el  shader  ya  está  compilado  y  enlazado,  y  los  índices  de  los  atributos 
de  los  vértices  ya  se  han  obtenido,  solo  queda  el  último  paso:  su  visualización. 
Primero,  hay  que  indicar  los  buffers  que  contienen  los  vértices  y  los  índices  corres¬ 
pondientes  al  modelo  que  se  va  a  visualizar.  También  hay  que  especificar  cómo  se 
encuentran  dispuestos  cada  uno  de  los  atributos  de  los  vértices  en  el  buffer  corres¬ 
pondiente.  Después  ya  se  puede  ordenar  el  dibujado,  indicando  tipo  de  primitiva 
y  número  de  elementos.  Los  vértices  se  procesarán  de  manera  independiente,  pero 
siempre  en  el  orden  en  el  que  son  enviados  al  procesador  gráfico.  Estas  operaciones 
se  muestran  en  el  listado  [2~4{  en  la  función  draw.  De  nuevo,  acude  a  la  especifica¬ 
ción  del  lenguaje  para  conocer  más  detalles  de  las  órdenes  utilizadas. 


2.3.2.  Tipos  de  primitivas  geométricas 

Las  primitivas  básicas  de  dibujo  en  WebGL  son  el  punto,  el  segmento  de  línea 
y  el  triángulo.  Cada  primitiva  se  define  especificando  sus  respectivos  vértices,  y 
estas  se  agrupan  a  su  vez  para  definir  objetos  de  mayor  complejidad.  En  WebGL, 
la  primitiva  geométrica  se  utiliza  para  especificar  cómo  han  de  ser  agrupados  los 
vértices  tras  ser  operados  en  el  procesador  de  vértices  y  así  poder  ser  visualizada. 
Son  las  siguientes: 

■  Dibujo  de  puntos: 

•  gl.POINTS 

■  Dibujo  de  líneas: 

•  Segmentos  independientes:  gl.LINES 
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•  Secuencia  o  tira  de  segmentos:  gl.LINE_STRIP 

•  Secuencia  cerrada  de  segmentos:  gl.LINE_LOOP 

■  Triángulos: 

•  Triángulos  independientes:  gl.TRIANGLES 

•  Tira  de  triángulos:  gl.TRIANGLE_STRIP 

•  Abanico  de  triángulos:  gl.TRIANGLE_FAN 

Ejercicios  - 

►  2.8  ¿Cuántos  triángulos  crees  que  se  pintarían  con  la  siguiente  orden?  (ten  en  cuenta 
que  al  tratarse  de  una  tira  pueden  haber  triángulos  degenerados) 

■  gl.drawElements (gl . TRIANGLE_STRIP ,  30,  gl . UNSIGNED_SHORT,  12) 

►  2.9  Abre  con  el  navegador  el  archivo  c02/dibuja.html ,  que  incluye  el  código  del  listado 


muestra? 

►  2.10  Sustituye  el  modelo  del  triángulo  en  dibuja.js  por  el  modelo  del  pentágono  que 
se  muestra  a  cotinuación: 


2.5  y  carga  a  su  vez  a  c02/dibuja.js ,  que  contiene  el  código  del  listado [224]  ¿Qué  objeto  se 


■  Puntos:  gl.drawElements (gl.POINTS,  5,  gl . UNSIGNED_SHORT,  0);.  Si 
no  eres  capaz  de  distinguir  los  puntos  añade  en  la  función  main  del  shader  de  vérti¬ 
ces:  gl_PointSize  =  5.0; 

■  Líneas:  gl .drawElements (gl .LINE_LOOP,  5,  gl . UNSIGNED_SHORT, 0 )  ; 

►  2.11  Realiza  las  modificaciones  necesarias  para  pintar  el  pentágono  del  ejercicio  an¬ 
terior  como  triángulos  independientes.  De  esta  manera  pasarás  a  verlo  relleno  (en  lugar  de 
solo  sus  aristas).  Piensa  primero  y  haz  los  cambios  después,  y  recuerda  que 

1.  Aunque  los  vértices  son  los  mismos,  tendrás  que  modificar  el  vector  de  índices  para 
ahora  especficar  los  triángulos. 

2.  Los  valores  de  los  parámetros  de  la  orden  drawElement  s  van  a  cambiar. 
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►  2.12  Continúa  utilizando  los  mismos  vértices  del  modelo  del  pentágono  y  realiza 
las  modificaciones  necesarias  para  obtener  una  estrella  como  la  de  la  figura  |2.9|  Prueba 
también  a  cambiar  el  grosor  del  trazo  mediante  la  orden  gl .  lineWidth  (5.0)  justo 
antes  de  ordenar  el  dibujado  de  la  geometría  (esto  no  funciona  en  Windows). 


Figura  2.9:  Estrella  dibujada  a  partir  de  los  vértices  de  un  pentágono 

►  2.13  Utiliza  ahora  la  descripción  de  los  vértices  que  figura  a  continuación.  Crea  una 
función  que  se  llame  draw Ge ometry Lines  y  que  utilizando  dichos  vértices  dibuje  la  estrella 
con  líneas  de  manera  que  se  obtenga  el  resultado  de  la  figura|2. 10|(imagen  de  la  izquierda). 
Crea  otra  función  que  se  llame  drawGeometryTriangles  y  que  dibuje  la  estrella  mediante 
triángulos  independientes  de  manera  que  se  obtenga  el  resultado  que  se  muestra  en  la  figura 
|2.10| (imagen  de  la  derecha). 


"vértices"  :  [0.0, 

0.9  , 

0.0  , 

-0.95, 

0.2  , 

0.0  , 

-0.6, 

-0.9, 

0.0  , 

0.6  , 

-0.9, 

0.0  , 

0.95  , 

0.2  , 

0.0  , 

0.0  , 

-0.48,  0.0, 

0.37  , 

-0.22,  0.0, 

0.23  , 

0.2  , 

0.0  , 

-0.23, 

0.2  , 

0.0  , 

-0.37, 

-0.22,  0.0]  , 

Figura  2.10:  Estrella  dibujada  con  líneas  (izquierda)  y  con  triángulos  (derecha) 
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Listado  2.4:  Código  mínimo  que  se  corresponde  con  la  estructura  básica  de  un  programa  que  utiliza 
WebGL  (disponible  en  c02/dibuja.js) 


var  gl  ,  program  ; 


var  exampleTriangle  =  { 


vértices 


"indices 

}; 


[-0.7,  -0.7,  0.0, 
0.7,  -0.7,  0.0, 
0.0,  0.7,  0.0], 

0,  1,  2] 


function  getWebGLContext  ()  { 

var  canvas  =  document .  getElementByld  ( "myCanvas " )  ; 
try  { 

return  canvas  .  getContext("  webgl2 " )  ; 

i 

catch(e)  { 

} 

return  nuil  ; 


function  initShaders  ()  { 

var  vertexShader  =  gl  .  createShader  (  gl  .  VERTEX_SHADER)  ; 
gl  .  shaderSource  (  vertexShader  , 

document .  getElementByld  ( "  my  VertexShader " )  .  text )  ; 
gl  .  compileShader  (vertexShader)  ; 

var  fragmentShader  =  gl  .  createShader  (  gl  .FRAGMENT_SHADER)  ; 
gl  .  shaderSource  (  fragmentShader  , 

document .  getElementByld  ( "  my  FragmentShader " )  .  text )  ; 
gl  .  compileShader  (  fragmentShader  )  ; 

program  =  gl  .  createProgram  ()  ; 

gl  .  attachShader  ( program  ,  vertexShader)  ; 

gl  .  attachShader  ( program  ,  fragmentShader)  ; 

gl  .  linkProgram  ( program )  ; 

gl  .  useProgram  ( program )  ; 

//  Obtener  la  referencia  del  atributo  posición 
program.  vertexPo sition Attribute  = 

gl  .  get  AttribLocation  (  program,  "  VertexPo  sition  ")  ; 

//  Habilitar  el  atributo  posición 

gl  .  enableVertex  AttribArray  ( program  .  vertexPo  sition  Attribu 

} 
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function  initB  uf  f  er  s  (model )  { 


//  Buffer  de  vértices 

model .  idB ufferVertices  =  gl  .  createBuffer  ()  ; 
gl.bindBuffer  (  gl  .  ARRAY_BUFFER,  model .  idB  ufferVertices  )  ; 
gl  .  bufferData  (  gl  .  ARRAY_BUFFER, 

new  Float3  2  Array  ( model .  v  er  ti  c  e  s  )  ,  gl  .  STATIC_DRAW)  ; 

//  Buffer  de  índices 

model .  idB ufferlndice s  =  gl  .  createBuffer  ()  ; 

gl.bindBuffer  (  g  1  .  ELEMENTA  RR  AYB  U  LEER ,  model .  idBufferlndices  )  ; 
gl  .  bufferData  (  g  1  . ELEMENT_ARRAY_BUFFER , 

new  Uintl óArray  ( model .  indice s  )  ,  gl  . STATIC_DRAW)  ; 


function  initRendering  ()  { 

gl. clearColor (0.15 , 0 . 1 5  , 0 . 1 5  , 1 . 0) ; 

i 


function  draw(model)  { 

gl  .  bindBuffer(gl  .  ARRAY_BUFEER,  model .  idBufferVertices)  ; 
gl  .  vertex  AttribPointer  ( program  .  vertexPosition  Attribute  ,  3, 
gl.FLOAT,  false  ,  0,  0); 

gl  .  bindBuffer(gl  .  ELEMENTA  R  R  A  YB  U  EEER ,  model .  idBufferlndices)  ; 
gl  .  drawElements  (  gl  . TRIANGLES ,  3,  g  1  . UNSIGNED_SHORT ,  0); 


function  drawScene()  { 

gl  .  clear  (  gl  . COLOR_BUFFER_BIT )  ; 
draw  (  exampleTriangle  )  ; 


function  initWebGLQ  { 
gl  =  getWebGLContext  ()  ; 

if  (!gl)  { 

alert("WebGL  2.0  no  está  disponible"); 

return  ; 


initShaders  ()  ; 

initB  uffers  (  exampleTriangle  )  ; 
initRendering  ()  ; 

requestAnimationFrame  (  drawScene  )  ; 


initWebGLQ  ; 
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Listado  2.5:  Código  HTML  que  incluye  un  canvas  y  los  dos  shaders  básicos  (disponible  en 
c02/dibuja.  html) 


<  IDOCTYPE  html  > 
chtml  > 

<head> 

cmeta  char set  =  "  utf  —  8"> 

< t i 1 1  e  >  Dibuja  </  t i 1 1  e  > 

<style  type=" text / css "> 

canvas  {border:  lpx  solid  black;} 

</ sty le  > 

<script  id  =  "  my YertexShader " 

type="x— shader /x— vertex  "># versión  300  es 

in  vec3  VertexPo sition  ; 

void  main()  { 

gl_Position  =  vec4  (  VertexPo  sition  ,  1.0); 


i 

</  script  > 

<script  id  =  "  myFragmentShader " 

type  =  "x— shader /x—fragment  "># ver sion  300  es 

precisión  mediump  float  ; 
out  vec4  fragmentColor ; 

void  main()  { 

fragmentColor  =  vec4  ( 0 . 0  , 1 . 0  , 0 . 0 , 1 . 0 )  ; 


i 

</  script  > 

</head> 

<body> 

<canvas  id  =  "myCanvas "  width="600"  height=" 600 "> 
El  Navegador  no  soporta  HTML5 
</canvas  > 

<script  src  =  "  dibuj  a  .  j  s  "  ></  s  cript  > 

</body> 

</html  > 
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2.3.3.  Variables  uniform 


Imagina  que,  por  ejemplo,  quieres  que  el  color  de  la  estrella  de  los  ejercicios  an¬ 
teriores  no  sea  fijo  sino  que  pueda  cambiarse  de  forma  dinámica.  Para  conseguirlo 
es  necesario  que  el  color  que  figura  en  el  shader  de  fragmentos  sea  una  variable, 
tal  y  como  se  muestra  en  el  listado  [276} 

Listado  2.6:  Ejemplo  de  variable  uniform  en  el  shader  de  fragmentos 

#version  300  es 

precisión  mediump  float  ; 

uniform  vec4  myColor ; 

out  vec4  fragmentColor  ; 

void  main()  { 

fragmentColor  =  myColor ; 

1 


La  variable  myColor  es  de  tipo  uniform  porque  su  valor  será  constante  para 
todos  los  fragmentos  que  reciba  procedentes  de  procesar  la  estrella,  pero  se  puede 
hacer  que  sea  diferente  para  cada  estrella  cambiando  su  valor  antes  de  ordenar 
su  dibujado.  Observa  el  fragmento  de  código  del  listado 


2.7 


Esas  líneas  son  las 

encargadas  de  obtener  el  índice  de  la  variable  myColor  en  el  shader  y  de  especificar 
su  valor.  Mientras  que  la  primera  línea  solo  es  necesario  ejecutarla  una  vez,  la 
segunda  habrá  que  utilizarla  cada  vez  que  se  necesite  asignar  un  nuevo  valor  a 
la  variable  myColor.  Así,  la  primera  línea  se  podría  añadir  al  final  de  la  función 
initShaders ,  mientras  que  la  segunda  línea  habrá  que  añadirla  justo  antes  de  ordenar 
el  dibujado  del  modelo. 


Listado  2.7:  Obtiene  la  referencia  y  establece  el  valor  de  la  variable  uniform  myColor 

var  idMyColor  =  gl  .  getUniformLocation  ( program  ,  "myColor"); 
gl  .  uniform4f  ( idMyColor  ,  1.0,  0.0,  1.0,  1.0); 


Ejercicios 


►  2.14  Dibuja  dos  estrellas  de  colores  distintos,  una  para  pintar  el  interior  y  la  otra  para 
pintar  el  borde  (véase  figura  |2J"T]).  Elije  colores  que  contrasten  entre  sí.  Ten  en  cuenta 
también  que  el  orden  de  dibujado  es  importante,  piensa  qué  estrella  deberías  dibujar  en 
primer  lugar.  Nota:  puedes  definir  dos  vectores  de  índices,  cada  uno  con  un  nombre  distinto, 
y  crear  un  buffer  adicional  en  la  función  initBuffers. 
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Figura  2. 1 1 :  Ejemplo  de  dos  estrellas:  una  aporta  el  color  interior  y  la  otra  el  color  del  borde 


2.3.4.  Variables  out 


Hasta  el  momento,  cada  vértice  consta  de  un  único  atributo:  su  posición.  Ahora 
se  va  a  añadir  un  segundo  atributo,  por  ejemplo,  un  valor  de  color  para  cada  vértice. 
En  primer  lugar  hay  que  ampliar  la  información  de  cada  vértice  para  contener  su 


Listado  2.8:  Ejemplo  de  modelo  con  dos  atributos  por  vértice:  posición  y  color 


Listado  2.9:  Localización  y  habilitación  de  los  dos  atributos:  posición  y  color 

program  .  vertexPo sition  Attribute  = 

gl  .  getAttribLocation  (program  ,  "VertexPosition"); 
gl  .  enableVertexAttribArray  (program  .  vertexPositionAttribute)  ; 

program  .  vertexColor  Attribute  = 

gl  .  getAttribLocation  (program  ,  "  VertexColor  " )  ; 

gl  .  enableVertexAttribArray  (program  .  vertexColorAttribute)  ; 
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Listado  2.10:  Ejemplo  de  shader  con  dos  atributos  por  vértice:  posición  y  color 
#version  300  es  //  Shader  de  vértices 

in  vec3  VertexPosition  ; 
in  vec4  VertexColor; 
out  vec4  colorOut  ; 

void  main()  { 

colorOut  =  VertexColor; 

gl_Position  =  vec4  (  VertexPosition  ,  1.0); 

} 

#version  300  es  //  Shader  de  fragmentos 
precisión  mediump  float  ; 

in  vec4  colorOut ; 
out  vec4  fragmentColor ; 

void  main()  { 

fragmentColor  =  colorOut ; 

} 


Los  cambios  correspondientes  al  shader  se  recogen  en  el  listado 


2.10 


Observa 


que  ahora  están  declarados  en  el  shader  de  vértices  los  dos  atributos  de  tipo  in, 
VertexPosition  y  VertexColor.  Por  otra  parte,  la  variable  colorOut ,  en 
el  shader  de  vértices,  se  ha  declarado  como  variable  de  salida  mediante  la  pala¬ 
bra  clave  out.  A  la  variable  colorOut  simplemente  se  le  asigna  el  valor  de  color 
por  vértice  representado  con  el  atributo  VertexColor.  Las  variables  declaradas 
como  variables  de  salida  en  el  shader  de  vértices  deben  estar  declaradas  con  el 
mismo  nombre  en  el  shader  de  fragmentos  como  variables  de  entrada  (utilizando 
la  palabra  clave  in)  y  serán  interpoladas  linealmente  en  el  proceso  de  rasteriza- 
ción.  También  la  variable  fragmentColor  es  de  tipo  out  y  contiene  el  color  de 
salida  del  shader  de  fragmentos.  La  figura |2. 12] muestra  el  resultado. 


Figura  2.12:  Resultado  de  visualizar  un  triángulo  con  un  valor  de  color  diferente  para  cada  vértice 
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Por  último,  hay  que  modificar  la  función  de  dibujo.  Observa  la  nueva  función 
en  el  listado  2. 1 1|  que  recoge  los  cambios  necesarios.  Presta  atención  a  los  dos 
últimos  parámetros  de  las  dos  llamadas  a  gl.vertexAttribPointer.  Consulta  la  docu¬ 
mentación  para  entender  el  por  qué  de  esos  valores. 


Listado  2.11:  Dibujo  de  un  modelo  con  dos  atributos  por  vértice 
function  draw(model)  { 

gl  .  bindBuffer(gl  .  ARRAY_BUFFER ,  model .  idBufferVertices)  ; 
gl  .  vertex  AttribPointer  ( program  .  vertexPo  sition  Attribute  ,  3, 
gl.FLOAT,  false  ,  7*4,  0); 

gl  .  vertex  AttribPointer  ( program  .  vertexColor  Attribute  ,  4, 

gl.FLOAT,  false  ,  7*4,  3*4); 

gl  .  bindBuffer(gl  .  ELEMENT_ARRAY_BUFFER ,  model .  idBufferlndices)  ; 
gl  .  drawElements  (  gl  . TRIANGLES ,  3  ,  gl  . UNSIGNED_SHORT ,  0)  ; 


Ejercicios  - 

►  2.15  ¿Cuál  es  el  número  mínimo  de  bujfers  que  necesitas  en  WebGL  para  almace¬ 
nar  un  modelo  poligonal  que  utiliza  la  representación  de  vértices  compartidos  si  para  cada 
vértice  almacenas  los  atributos  de  posición  y  normal? 

►  2.16  Observa  la  imagen  de  la  figura|2.13l  ¿qué  colores  se  han  asignado  a  los  vértices? 
Edita  c02/interpola.js ,  que  ya  incluye  los  fragmentos  de  código  que  se  han  explicado  en 
esta  sección,  y  modifica  los  valores  de  color  para  obtener  ese  mismo  resultado.  Carga  en  el 
navegador  c02/interpola.html  para  comprobar  si  has  acertado. 


Figura  2.13:  Observa  el  triángulo  y  contesta,  ¿qué  color  se  ha  asignado  a  cada  vértice? 

►  2.17  Si  modificas  el  programa  interpola  para  que  se  muestre  una  estrella  con  color 
amarillo  en  las  cinco  puntas  y  color  azul  en  el  resto  de  vértices,  ¿qué  resultado  crees  que  se 
obtendrá?  Haz  los  cambios  oportunos  y  comprueba  si  el  resultado  coincide  con  el  esperado. 
Prueba  también  a  cambiar  los  colores  de  los  vértices  de  las  puntas,  y  de  los  otros  también, 
con  los  colores  que  tú  elijas,  experimenta,  y  obtén  una  combinación  que  sea  de  tu  agrado. 
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Cuestiones 


►  2.1  Algunos  conceptos  relacionados  con  los  modelos  poligonales  son:  teselado,  trian- 
gularización,  simplificación  y  optimización.  Averigua  el  significado  de  dichos  conceptos. 
Pon  algún  ejemplo  donde  resulte  interesante  aplicar  cada  uno  de  ellos. 

►  2.2  ¿Por  qué  es  importante  hacer  que  todas  las  caras  de  una  malla  poligonal  estén 
orientadas  de  la  misma  forma? 

►  2.3  ¿Por  qué  es  importante  saber  si  un  modelo  poligonal  es  cerrado  (que  no  presenta 
agujeros)? 

►  2.4  ¿Qué  es  una  tira  de  triángulos? 

►  2.5  Supon  que  tienes  dos  tiras  de  triángulos  donde  cada  tira  representa  un  trozo  di¬ 
ferente  de  la  superficie  de  un  modelo,  y  no  hay  vértices  en  común  entre  ambas  tiras.  La 
primera  tira  está  formada  por  la  siguiente  secuencia  de  índices:  10,  11,  12,  13  y  14.  Y 
la  segunda  tira  por:  20,  21,  22  y  23.  Si  deseas  unir  ambas  tiras  para  tener  una  única  tira 
de  triángulos,  uniendo  el  final  de  la  primera  tira  con  el  inicio  de  la  segunda,  determina  la 
secuencia  completa  de  índices:  10, 11, 12, 13, 14, ...,  20,  21,  22,  23. 

►  2.6  ¿Qué  es  un  buffer  objectl 

►  2.7  ¿Cuántos  buffer  objects  necesitas  como  mínimo  para  almacenar  un  modelo  poli¬ 
gonal?  ¿Por  qué? 

►  2.8  ¿Qué  significa  el  segundo  parámetro  de  la  orden  drawElements  si  el  primero 
es  gl  .LINES? 

►  2.9  Para  el  modelo  de  un  hexágono,  ¿qué  valor  es  el  adecuado  para  el  segundo  pará¬ 
metro  de  la  orden  drawElements  para  los  casos  en  los  que  el  primero  sea  gl .  LINES, 
gl . LINE_STRIP y  gl . LINE_LOOP? 

►  2.10  ¿Qué  significa  que  una  variable  sea  unif  orm? 

►  2.11  ¿Qué  significa  que  una  variable  sea  de  tipo  i n  en  el  shader  de  vértices?  ¿Puede 
haber  una  variable  de  tipo  i n  en  el  shader  de  fragmentos? 

►  2.12  Si  tienes  una  variable  un  i  f  o  rm  para  especificar  el  color  de  dibujo  del  modelo  de 
una  estrella,  en  el  caso  de  querer  dibujar  varias  estrellas  pero  todas  ellas  del  mismo  color, 
¿es  necesario  llamar  a  gl .  unif  orm  antes  de  ordenar  cada  dibujado? 

►  2.13  Si  añades  un  nuevo  atributo  por  vértice,  ¿cómo  especificas  los  valores  para  este 
nuevo  atributo  en  el  modelo? 

►  2.14  ¿Qué  es  una  variable  de  tipo  out  cuando  esta  aparece  en  el  shader  de  vértices? 
¿Y  qué  significa  cuando  aparece  en  el  shader  de  fragmentos?  ¿Crees  que  es  posible  que 
haya  más  de  una  variable  de  tipo  out  en  el  shader  de  vértices?  ¿Y  en  el  de  fragmentos? 

►  2.15  ¿Es  posible  establecer  el  valor  de  una  variable  de  tipo  out  como,  por  ejemplo,  se 
hace  con  las  variables  unif  orm? 

►  2.16  Si  tienes  varios  atributos  por  vértice,  ¿cómo  obtienes  los  dos  últimos  parámetros 
de  la  orden  vertexAttribPointer? 
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Capítulo  3 


Transformaciones  geométricas 


A 

Indice 

13.1.  Transformaciones  básicasl .  56 
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13.6.  Transformaciones  en  WebGLI .  63 


En  la  etapa  de  modelado  los  objetos  se  definen  bajo  un  sistema  de  coordenadas 
propio.  A  la  hora  de  crear  una  escena,  estos  objetos  se  incorporan  bajo  un  nuevo 
sistema  de  coordenadas  conocido  como  sistema  de  coordenadas  del  mundo.  Este 
cambio  de  sistema  de  coordenadas  es  necesario  y  se  realiza  mediante  transforma¬ 
ciones  geométricas.  La  figura  [3TT|  muestra  algunos  ejemplos  de  objetos  obtenidos 
mediante  la  aplicación  de  transformaciones  a  primitivas  geométricas  simples  como 
el  cubo,  la  esfera  o  el  toro. 


Figura  3.1:  Ejemplos  de  objetos  creados  utilizando  transformaciones  geométricas 
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3.1.  Transformaciones  básicas 

3.1.1.  Traslación 

La  transformación  de  traslación  consiste  en  desplazar  el  punto  p  =  (px,Py,Pz) 
mediante  un  vector  t  =  (tx,  ty,  tz),  de  manera  que  el  nuevo  punto  q  =  (qx,qy,qz) 
se  obtiene  así: 


Qx  —  Px  tXi  Qy  —  Py  H ~  ty>  Qz  —  Pz  tz  (3.1) 

La  representación  matricial  con  coordenadas  homogéneas  de  esta  transforma¬ 
ción  es: 


T(t)  =  T(tX,ty,tZ ) 


(1  0  0  tx\ 

0  10  ty 

0  0  1  tz 

\0  0  0  1  / 


Utilizando  esta  representación,  el  nuevo  punto  se  obtiene  así: 


q  =  T(t)  ■  [) 


(3.2) 


(3.3) 


donde  p  =  (px,Py,Pz,  1)T  y  q  =  (■ qx ,  qy,  qz,  1)T,  es  decir,  los  puntos  p  y  q  en 
coordenadas  homogéneas. 


3.1.2.  Escalado 

La  transformación  de  escalado  consiste  en  multiplicar  el  punto  p  =  (px,Py,Pz) 
con  los  factores  de  escala  sx,  sy  y  sz  de  tal  manera  que  el  nuevo  punto  q  = 
( qx ,  qy,qz)  se  obtiene  así: 


qx=Px-  Sx,  Qy=Py-  Sy,  qz  =  Pz  ■  sz  (3.4) 

La  representación  matricial  con  coordenadas  homogéneas  de  esta  transforma¬ 
ción  es: 


S(s)  -  S(sx,  Sy,  sz)  — 


(  sx 

0 

0 

\o 


0 

Sy 

0 

o 


o  0\ 
o  o 
0 

0  lj 


(3.5) 


Utilizando  esta  representación,  el  nuevo  punto  se  obtiene  así:  q  =  S(s)  ■  p. 


Ejercicios  - 

►  3.1  Cuando  los  tres  factores  de  escala  son  iguales,  se  denomina  escalado  uniforme. 
Ahora,  lee  y  contesta  las  siguientes  cuestiones: 

■  ¿Qué  ocurre  si  los  factores  de  escala  son  diferentes  entre  sí? 
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¿Y  si  algún  factor  de  escala  es  cero? 

¿Qué  ocurre  si  uno  o  varios  factores  de  escala  son  negativos? 
¿Y  si  el  factor  de  escala  está  entre  cero  y  uno? 


3.1.3.  Rotación 

La  transformación  de  rotación  gira  un  punto  un  ángulo  </>  alrededor  de  un  eje, 
y  las  representaciones  matriciales  con  coordenadas  homogéneas  para  los  casos  en 
los  que  el  eje  de  giro  coincida  con  uno  de  los  ejes  del  sistema  de  coordenadas  son 
las  siguientes: 


Rx(<i>)  = 


Rz(0)  = 


/ 10  o  0\ 

0  eos  c¡)  —  sin  0  0 

0  sin  (j)  eos  (f)  0 


\0 

0 

0 

1/ 

/  COS(/) 

0 

sin 

°\ 

0 

1 

0 

0 

-  sin  cp 

0 

eos 

<t> 

0 

0 

0 

0 

V 

/ COS  (j)  - 

-  sin  (/) 

0 

°\ 

sin  (j) 

COS 

4> 

0 

0 

0 

0 

1 

0 

0 

0 

0 

y 

(3.6) 


(3.7) 


(3.8) 


Utilizando  cualquiera  de  estas  representaciones,  el  nuevo  punto  siempre  se  ob¬ 
tiene  así:  q  =  R(q í>)  •  p. 


3.2.  Concatenación  de  transformaciones 

Una  gran  ventaja  del  uso  de  las  transformaciones  geométricas  en  su  forma  ma- 
tricial  con  coordenadas  homogéneas  es  que  se  pueden  concatenar.  De  esta  manera, 
una  sola  matriz  puede  representar  toda  una  secuencia  de  matrices  de  transforma¬ 
ción. 

Cuando  se  realiza  la  concatenación  de  transformaciones,  es  muy  importante 
operar  la  secuencia  de  transformaciones  en  el  orden  correcto,  ya  que  el  producto 
de  matrices  no  posee  la  propiedad  conmutativa. 

Por  ejemplo,  piensa  en  una  esfera  con  radio  una  unidad  centrada  en  el  origen  de 
coordenadas  y  en  las  dos  siguientes  matrices  de  transformación  T  y  S\  T (5, 0,  0) 
desplaza  la  componente  x  cinco  unidades;  S( 5, 5,  5)  escala  las  tres  componentes 
con  un  factor  de  cinco.  Ahora,  dibuja  en  el  papel  cómo  quedaría  la  esfera  después 
de  aplicarle  la  matriz  de  transformación  M  si  las  matrices  se  multiplican  de  las  dos 
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formas  posibles,  es  decir,  M  =  T  •  S  y  M  =  S  T.  Como  verás,  los  resultados  son 
bastante  diferentes. 

Por  otra  parte,  el  producto  de  matrices  sí  que  posee  la  propiedad  asociativa. 
Esto  se  puede  aprovechar  para  reducir  el  número  de  operaciones,  aumentando  así 
la  eficiencia. 


3.3.  Matriz  de  transformación  de  la  normal 

La  matriz  de  transformación  del  modelo  es  consistente  para  geometría  y  para 
vectores  tangentes  a  la  superficie.  Sin  embargo,  dicha  matriz  no  siempre  es  válida 
para  los  vectores  normales  a  la  superficie.  En  concreto,  esto  ocurre  cuando  se  utili¬ 
zan  transformaciones  de  escalado  no  uniforme  (véase  figura [3T2]).  En  este  caso,  la 
matriz  de  transformación  de  la  normal  N  es  la  traspuesta  de  la  inversa  de  la  matriz 
de  transformación  del  modelo: 

N  =  (M-1)t  (3.9) 

Además,  como  la  normal  es  un  vector  y  la  traslación  no  le  afecta  (y  el  escalado 
y  la  rotación  son  transformaciones  afines),  solo  hay  que  tomar  los  3  x  3  compo¬ 
nentes  superior  izquierda  de  M. 


Antes  de  la  transformación  Después  de  la  transformación 


Figura  3.2:  En  la  imagen  de  la  izquierda  se  representa  de  perfil  un  polígono  y  su  normal  n.  En  la 
imagen  de  la  derecha  se  muestra  el  mismo  polígono  tras  aplicar  una  transformación  de  escalado  no 
uniforme  5(2, 1).  Si  se  aplica  esta  transformación  a  la  normal  n,  se  obtiene  p  como  vector  normal 
en  lugar  de  m,  que  es  la  normal  correcta 

Señalar  por  último  que,  después  de  aplicar  la  transformación,  y  únicamente  en 
el  caso  de  incluir  escalado,  las  longitudes  de  las  normales  no  se  preservan,  por  lo 
que  es  necesario  normalizarlas.  Como  esta  operación  es  cara  computacionalmente, 
¿se  te  ocurre  alguna  manera  de  evitarla? 
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Ejercicios 


En  los  siguientes  ejercicios  el  eje  X  es  el  de  color  rojo,  el  Y  es  el  de  color  verde  y  el 
Z  es  el  de  color  azul. 

►  3.2  Comienza  con  un  cubo  de  lado  uno  centrado  en  el  origen  de  coordenadas,  tal  y 
como  se  muestra  en  la  figura  (a).  Usa  dos  cubos  más  como  este  y  obtén  el  modelo  que  se 
muestra  en  la  figura  ( b ),  donde  cada  nuevo  cubo  tiene  una  longitud  del  lado  la  mitad  de  la 
del  cubo  anterior.  Detalla  las  transformaciones  utilizadas. 


(a)  (b) 


►  3.3  Determina  las  transformaciones  que  sitúan  el  cono  que  se  muestra  en  la  figura  (c) 
(radio  de  la  base  y  altura  de  valor  1)  en  la  posición  que  se  muestra  en  la  figura  (< d )  (radio 
de  la  base  de  valor  1  y  altura  de  valor  3).  Ten  en  cuenta  el  punto  de  referencia  P  señalado 
con  una  flecha,  de  manera  que  quede  ubicado  tal  y  como  se  observa  en  la  figura. 
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►  3.4  Comienza  con  una  esfera  de  radio  uno  centrada  en  el  origen  de  coordenadas.  La 
figura  ( e )  muestra  la  esfera  escalada  con  factores  de  escala  sx  =  sy  =  0.5  y  sz  =  3.  Obtén 
las  transformaciones  que  sitúan  a  la  esfera  tal  y  como  se  muestra  en  la  figura  (f),  donde  un 
punto  final  está  en  el  origen  y  el  otro  en  la  recta  x  =  y  =  z. 


►  3.5  Observa  la  posición  inicial  del  objeto  en  la  figura  de  la  izquierda.  Este  objeto  lo 
vas  a  utilizar  dos  veces  para  crear  el  brazo  articulado  que  se  muestra  en  la  figura  de  la 
derecha.  Determina  las  transformaciones  que  has  de  aplicarle.  La  posición  final  del  brazo 
ha  de  depender  de  los  ángulos  alfa ,  beta  y  gamma. 
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3.4.  Giro  alrededor  de  un  eje  arbitrario 


Sean  d  y  0  el  vector  unitario  del  eje  de  giro  y  el  ángulo  de  giro,  respectivamente. 
Para  realizar  la  rotación  hay  que  calcular  en  primer  lugar  una  base  ortogonal  que 
contenga  d.  La  idea  es  hacer  un  cambio  de  base  entre  la  base  que  forman  los  ejes 
de  coordenadas  y  la  nueva  base,  haciendo  coincidir  el  vector  d  con,  por  ejemplo, 
el  eje  X ,  para  entonces  rotar  0  grados  alrededor  de  X  y  finalmente  deshacer  el 
cambio  de  base. 

La  matriz  que  representa  el  cambio  de  base  es  esta: 

í  dx  dy  dz\ 

R  =  lex  ey  ez  J  (3.10) 

\fx  fy  fz) 

donde  e  es  un  vector  unitario  normal  a  d,  y  /  es  el  producto  vectorial  de  los  otros 
dos  vectores  /  =  d  x  e.  Esta  matriz  deja  al  vector  d  en  el  eje  X ,  al  vector  e 
en  el  eje  y  y  al  vector  /  en  el  eje  Z  (véase  figura  |3.3|).  El  vector  e  se  puede 
obtener  de  la  siguiente  manera:  partiendo  del  vector  d,  haz  cero  su  componente 
de  menor  magnitud  (el  más  pequeño  en  valor  absoluto),  intercambia  los  otros  dos 
componentes,  niega  uno  de  ellos  y  normalízalo. 


Figura  3.3:  La  nueva  base  formada  por  los  vectores  d,  e  y  /  se  transforma  para  coincidir  con  los  ejes 
de  coordenadas 

Así,  teniendo  en  cuenta  que  R  es  ortogonal,  es  decir,  que  su  inversa  coincide 
con  la  traspuesta,  la  matriz  de  rotación  final  es: 

RM)  =  rt  rx{4>)r  (3.11) 

3.5.  La  biblioteca  glMatrix 

Como  ayuda  a  la  programación,  la  biblioteca  glMatrix  proporciona  funcio¬ 
nes  tanto  para  la  construcción  de  las  matrices  de  transformación  como  para  operar 
con  ellas.  En  concreto,  las  siguientes  funciones  permiten  construir,  respectivamen¬ 
te,  las  matrices  de  traslación,  escalado  y  giro  alrededor  de  un  eje  arbitrario  que  pasa 
por  el  origen: 
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■  mat4.fromTranslation  ( out ,  v) 

■  mat4.fromScaling  (out,  v) 

■  mat4.fromRotation  (out,  rad,  axis ) 


Ejercicios  - 

►  3.6  Accede  a  la  página  web  glmatrix  .  net  Ve  a  la  documentación  y,  por  ejem¬ 
plo,  busca  el  método  f  romTranslat  ion  de  la  clase  mat  4.  La  propia  ayuda  te  permite 
acceder  al  código  fuente  de  la  librería.  Ve  al  código  del  método  f  romTranslat  ion  y 
comprueba  cómo  construye  la  respectiva  matriz  de  transformación. 


Por  ejemplo,  la  matriz  de  transformación  M  que  escala  un  objeto  al  doble  de 
su  tamaño  y  después  lo  traslada  en  dirección  del  eje  X  un  total  de  diez  unidades, 
se  obtendría  de  la  siguiente  forma: 


var  M  =  mat4 . 

create 

0 

; 

var  T  =  mat4 . 

create 

0 

; 

var  S  =  mat4 . 

create 

0 

■ 

mat4 .  fromTranslatio 

n 

(T, 

[10,0  ,0])  ; 

mat4 .  fromScal 

ing 

(S, 

[2,2,2]); 

mat4 .  multiply 

(M, 

T,  S)  ; 

Ejercicios  - 

►  3.7  ¿Qué  transformación  produces  si  en  el  ejemplo  anterior,  en  vez  de 
mat 4  . mult iply  (M,  T,  S),  apareciese  mat 4  . mu ltipl y  (M,  S,  T)? 


Si  M  es  la  matriz  de  transformación  del  modelo,  para  obtener  la  matriz  de 
transformación  de  la  normal,  N,  utilizando  glMatrix  se  puede  hacer,  por  ejem¬ 
plo,  lo  siguiente: 


var  N  =  mat3  .  ere  ate  ()  ; 
mat3  .  fromMat4  (N,M)  ; 
mat3.invert  (N,N)  ; 
mat3  .  transpose  (N,N)  ; 


GLMATRIX  también  porporciona  la  función  normalFromMat  4  (N,  M)  que 
realiza  exactamente  las  mismas  operaciones  que  las  del  listado  anterior. 
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3.6.  Transformaciones  en  WebGL 


WebGL  no  proporciona  modelos  de  primitivas  geométricas  3D.  Por  lo  tanto, 
y  en  primer  lugar,  es  necesario  obtener  una  descripción  geométrica  de  primitivas 
básicas  como  el  cubo,  la  esfera,  el  cono,  etc.  Por  ejemplo,  el  listado[23](del  capítulo 
anterior)  muestra  el  fragmento  de  código  que  define  un  cubo  de  lado  1  centrado 
en  el  origen  de  coordenadas,  con  sus  caras  paralelas  a  los  planos  de  referencia 
XY,  XZ  e  YZ.  Observa  que  este  modelo  consta  de  dos  vectores,  uno  contiene  las 
coordenadas  de  los  vértices  y  el  otro  contiene  los  índices  al  vector  de  vértices 
que  de  tres  en  tres  describen  los  triángulos.  El  índice  del  primer  vértice  es  0.  De 
momento  se  utilizan  modelos  que  solo  constan  de  geometría,  es  decir,  no  contienen 
otros  atributos  (normal,  color,  etc.),  por  lo  que  vamos  a  visualizarlos  en  alambre, 
es  decir,  solo  las  aristas  (véase  listado  [Ll]). 


Listado  3.1 :  Yisualización  en  alambre  de  un  modelo  poligonal  definido  con  triángulos  independientes 
function  draw(model)  { 

gl  .  bindB uffer  (  g  1  .  ARRAY_BUFFER ,  model .  idB  uf f er Vertic e s  )  ; 
gl  .  vertex  AttribPointer  (  vertexPo  sition  Attribute  ,  3, 

gl.FLOAT,  false  ,  0,  0); 

gl  .  bindBuffer  (  gl  .ELEMENT_ARRAY_BUFFER,  model .  idB ufferlndices  )  ; 
for  (var  i  =  0;  i  <  model .  indices  .  length  ;  i  +=  3) 

gl  .  drawElements  (  g  1  .  LINE_LOOP ,  3,  g  1  . UNSIGNED_SHORT ,  i  *2); 

1 


Observa  ahora  la  nueva  función  drawScene  ( )  en  el  listado 


3.2 


Esta  función 


incluye  ahora  los  tres  pasos  necesarios  para  dibujar  un  modelo  que  requiere  de  una 
matriz  de  transformación: 


1.  Se  obtiene  la  matriz  de  transformación  del  modelo,  modelMat  rix,  que  en 
este  caso  se  trata  de  un  escalado  a  la  mitad  de  su  tamaño. 


2.  Se  establece  el  valor  de  la  matriz  de  transformación  en  el  shader  de  vértices. 

3.  Se  ordena  el  dibujado  del  modelo.  Será  entonces  cuando  cada  vértice  del  mo¬ 
delo  se  multiplique  por  la  matriz  de  transformación  especificada  en  el  paso 
anterior. 


El  listado 


3.2 


también  muestra  comentadas  las  líneas  que  permiten  obtener  la 


matriz  de  la  normal  a  partir  de  la  matriz  de  transformación.  Esta  matriz  también  es 
enviada  al  shader  de  vértices  para  que  sea  operada  con  el  atributo  correspondiente. 

En  el  shader  de  vértices  se  incluye  la  operación  que  multiplica  cada  vértice 
por  su  correspondiente  matriz  de  transformación  (véase  listado  3.3).  Observa  que 
las  líneas  comentadas  corresponden  al  código  que  haría  falta  en  el  caso  de  que, 
además,  se  suministrara  el  atributo  de  la  normal  para  cada  vértice. 


63 


(cc)  José  Ribelles  y  Ángeles  López 
W  ISBN:  978-84-17429-87-4 


Informática  Gráfica  (2a  edición) 
DOI:  http://dx.doi.org/! 0.603 5/Sapiential  5 1 


Listado  3.2:  Ejemplo  de  los  pasos  necesarios  para  dibujar  un  objeto  transformado 
function  drawScene()  { 

gl  .  clear  (  gl  . COLOR_BUFFER_BIT )  ; 

//  1.  calcula  la  matriz  de  transformación 

var  modelMatrix  =  mat4  .  create  ()  ; 

mat4  .  fromScaling  (modelMatrix,  [  0 . 5  , 0 . 5  , 0 . 5  ] )  ; 

//  2.  establece  la  matriz  modelMatrix  en  el  shader  de  vértices 
gl  .  uniformMatrix4fv  ( program  .  modelMatrixIndex  ,  false  , 
modelMatrix )  ; 

//  para  la  matriz  de  la  normal: 

//  var  normalMatrix  =  mat3  .  create  ()  ; 

//  mat3  .  normalFromMat4  (normalMatrix,  modelMatrix ); 

//  gl .  uniformM  atrix3fv  ( program  .  normalMatrixIndex  ,  false, 
normalMatrix  )  ; 

/ /  3 .  dibuja  la  primitiva 
draw  ( exampleCube )  ; 

} 


Listado  3.3:  Shader  de  vértices  que  opera  cada  vértice  con  la  matriz  de  transformación  del  modelo 
#version  300  es 

uniform  mat4  M;  //  matriz  de  transformación  del  modelo 

//  uniform  mat3  N;  //  matriz  de  transformación  de  la  normal 

in  vec3  VertexPosition  ; 

//  in  vec3  VertexNormal ; 

//  out  vec3  VertexNormalT ; 

void  main  ()  { 

//  VertexNormalT  =  normalize  (N  *  VertexNormal); 
gl_Position  =  M*  vec4  ( VertexPosition  ,  1.0); 

} 
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Ejercicios 


►  3.8  Edita  cO 3 Ztr ansforma.html  y  c03/transforma.js.  Comprueba  que  se  han  incluido 
todos  los  cambios  explicados  en  esta  sección.  Observa  también  common/primitivasG.js , 
que  incluye  los  modelos  de  algunas  primitivas  geométricas  simples.  Echa  un  vistazo  a  la 
descripción  de  los  modelos.  Prueba  a  visualizar  las  diferentes  primitivas. 

►  3.9  Se  dispone  del  modelo  de  un  cubo  definido  con  su  centro  en  el  origen  de  coordena¬ 
das,  lado  1,  y  sus  aristas  paralelas  a  los  ejes  de  coordenadas.  Dado  el  siguiente  fragmento  de 
código  en  el  que  se  especifican  una  serie  de  transformaciones  geométricas,  dibuja  una  vista 
frontal  XY  (no  hace  falta  que  dibujes  la  Z)  de  cómo  quedan  los  dos  cubos  que  se  ordena 
dibujar  teniendo  en  cuenta  dichas  transformaciones  (asume  que  la  función  drawCubo  ( ) 
produce  el  dibujado  del  modelo  del  cubo). 


var  S  =  mat4  .  create  ()  ; 
var  TI  =  mat4 .  create  ()  ; 
var  T2  =  mat4 .  create  ()  ; 
var  M  =  mat4  .  create  ()  ; 

mat4 .  fromScaling  (S,  [  1,  2,  1]); 

mat4 .  fromTranslation  (TI,  [  0,  0.5,  0]); 

ma4.multiply  (M,  S,  TI); 

gl  .  uniformMatrix4fv  ( program  .  modelMatrixIndex  ,  false  ,  M)  ; 
drawCubo  ()  ; 

mat4 .  fromTranslation  (T2,  [  1,  0,  0]); 

ma4.multiply  (M,  M,  T2)  ; 

gl  .  uniformMatrix4fv  ( program  .  modelMatrixIndex  ,  false,  M)  ; 
drawCubo  ()  ; 


►  3.10  Observa  la  escena  que  se  muestra  en  la  figura|3.4[  Crea  una  escena  que  produzca 
la  misma  salida  utilizando  únicamente  la  primitiva  cubo.  En  primer  lugar,  piensa  sobre  el 
papel  qué  transformaciones  necesitas  aplicar  y  solo  después  procede  con  la  escritura  del 
código.  El  cubo  central  tiene  de  lado  0.1,  y  los  que  están  a  su  lado  tienen  la  misma  base 
pero  una  altura  que  va  incrementándose  en  0.1  a  medida  que  se  alejan  del  central.  Usa  un 
bucle  para  pintar  los  trece  cubos.  Nota:  ambas  imágenes  muestran  la  misma  escena,  pero 
en  la  imagen  de  la  derecha  se  ha  girado  la  escena  para  apreciar  mejor  que  son  objetos  3D. 


Figura  3.4:  Escena  modelada  a  partir  de  la  primitiva  geométrica  cubo 

►  3.11  Modela  la  típica  grúa  de  obra  cuyo  esquema  se  muestra  en  la  figura|3.5|utilizando 
como  única  primitiva  cubos  de  lado  1  centrados  en  el  origen  de  coordenadas.  La  carga  es 
de  lado  1,  el  contrapeso  es  de  lado  1.4,  y  tanto  el  pie  como  el  brazo  tienen  10  de  longitud. 
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Incluye  las  transformaciones  que  giran  la  grúa  sobre  su  pie,  que  desplazan  la  carga  a  lo 
largo  del  brazo,  y  que  levantan  y  descienden  la  carga. 


Figura  3.5:  Ejemplo  de  una  grúa  de  obra  modelada  con  cubos  y  transformaciones  geométricas 

►  3.12  En  este  ejercicio  vas  a  hacer  un  tanque.  En  la  figura  |T6|  puedes  observar  lo  que 
has  de  conseguir.  Los  cilindros  de  las  ruedas  tienen  una  altura  de  0.8  y  un  radio  de  0.1. 
Tapa  los  cilindros  por  ambos  lados.  El  cuerpo  del  tanque  es  un  cubo  escalado  para  ocupar 
lo  mismo  que  las  ruedas,  y  una  altura  de  0.2.  La  torreta  del  cañón  es  un  cilindro  de  radio 
0.2  y  altura  0.8.  Observa  dónde  está  situada  y  haz  coincidir  la  tuya  en  la  misma  posición. 
Tápala  también.  Por  último,  añade  el  cañón,  que  es  un  cilindro  de  longitud  0.8  y  radio  0.03. 


Figura  3.6:  Tanque  modelado  a  partir  de  diferentes  primitivas  geométricas 


►  3.13  Crea  un  reloj  como  el  de  la  figura  3.7  No  te  doy  dimensiones,  elígelas  tú.  Imítalo 


en  la  medida  de  lo  posible.  Sí  que  te  pido  que  marque  las  dos  en  punto. 


fw.  \  i 


Figura  3.7:  Reloj  modelado  a  partir  de  primitivas  geométricas  básicas 
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►  3.14  Indica  la  secuencia  de  transformaciones  que  debes  aplicar  a  un  cubo  centrado  en 
el  origen  de  coordenadas  (y  sus  lados  paralelos  a  los  ejes  de  coordenadas)  para  que  gire  30 
grados  alrededor  de  su  diagonal  (del  (-1,-1,-1)  al  (1,1,1)).  Solo  puedes  usar  giros  alrededor 
de  los  ejes  de  coordenadas. 

►  3.15  Internet  es  una  fuente  de  inspiración  excepcional,  utilízala  para  buscar  ejemplos 
que  te  sirvan  de  muestra  y  practicar  con  el  uso  de  las  transformaciones  geométricas.  Fíjate 
en  los  que  aparecen  en  la  figura|3.8[ 


Figura  3.8:  Otros  ejemplos  de  juegos  de  bloques  de  madera  coloreados 


Cuestiones  - 

►  3.1  ¿Qué  es  la  matriz  de  transformación  del  modelo? 

►  3.2  ¿Dónde  operas  la  matriz  de  transformación  del  modelo  con  cada  uno  de  sus  vér¬ 
tices? 

►  3.3  ¿Por  qué  en  el  shader  se  declara  la  matriz  de  transformación  del  modelo  de  tipo 
uniforml 

►  3.4  ¿En  qué  tipo  de  shader ,  vértices  o  fragmentos,  utilizas  la  matriz  de  transformación 

del  modelo? 

►  3.5  ¿Qué  es  la  matriz  de  transformación  de  la  normal?  ¿Dónde  operas  cada  normal 
con  su  matriz  de  transformación? 

►  3.6  ¿Por  qué  las  transformaciones  de  traslación  se  pueden  omitir  en  el  proceso  de 
cálculo  de  la  matriz  de  transformación  de  la  normal? 

►  3.7  Dada  una  matriz  de  transformación  que  al  operarla  con  un  modelo  produce  su 
simétrico,  ¿qué  le  ocurren  a  las  normales  si  las  operamos  con  esa  misma  matriz?  ¿produce 
las  normales  correctas? 

►  3.8  ¿Qué  hace  exactamente  la  función  ere  ate  de  la  librería  GlMatrix? 

►  3.9  Si  tienes  tres  transformaciones  representadas  cada  una  de  ellas  por  las  matrices 
mi,  mB  y  mC,  ¿cómo  debes  operar  las  matrices  para  obtener  la  matriz  de  transformación 
del  modelo  cuando  la  primera  transformación  que  deseas  aplicar  es  mB ,  después  mi  y 
por  último  mC? 

►  3.10  Dado  un  cilindro  cuya  base  está  sobre  el  plano  Z  =  0  y  su  eje  en  el  +Z,  radio  uno 
y  altura  uno,  obtén  la  matriz  de  transformación,  T,  que  aplicada  sobre  dicho  cilindro  lo 
lleva  a  que  su  eje  coincida  con  la  diagonal  positiva  X  =  Y,  Z  =  0  teniendo  en  cuenta  que 
el  punto  centro  de  la  base  que  residía  en  el  origen  de  coordenadas  permanece  en  la  misma 
posición  después  de  su  transformación. 
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►  3.11  Imagina  que  necesitas  visualizar  un  modelo  poligonal  creado  por  un  tercero.  Del 
modelo  tienes  su  descripción  geométrica  (vértices,  normales,  índices,  etc.).  Por  desgracia, 
al  tratar  de  visualizarlo  con  WebGL  sin  aplicarle  ningún  tipo  de  transformación  geométrica 
obtienes  un  canvas  vacío.  Indica  qué  transformaciones  aplicarías  sobre  el  modelo  a  fin  de 
conseguir  visualizarlo  de  manera  que  este  aparezca  completo  dentro  del  canvas  y  al  mismo 
tiempo  se  dibuje  lo  más  grande  posible.  Indica  también  cómo  obtendrías  los  valores  que 
necesitas  para  realizar  dichas  transformaciones. 


68 


José  Ribelles  y  Ángeles  López  Informática  Gráfica  (2a  edición) 

ISBN:  978-84-17429-87-4  DOI:  http://dx.doi.org/10.6035/Sapiential51 


Capítulo  4 

Viendo  en  3D 


A 

Indice 

14.1.  Transformación  de  la  cámaral .  . 

4.2.  Transformación  de  proyección  . 

4.2.1.  Proyección  paralela| .  .  .  . 

4.2.2.  Proyección  perspectiva]  .  . 

4.3.  Transformación  al  área  de  dibujo 

4.4.  Eliminación  de  partes  ocultas  .  . 
14.5.  Viendo  en  3D  con  WébGLl.  .  .  . 


69 

71 

71 

73 

74 

74 

75 


Al  igual  que  en  el  mundo  real  se  utiliza  una  cámara  para  conseguir  fotogra¬ 
fías,  en  nuestro  mundo  virtual  también  es  necesario  definir  un  modelo  de  cámara 
que  permita  obtener  vistas  2D  de  nuestro  mundo  3D.  El  proceso  por  el  que  la  cá¬ 
mara  sintética  obtiene  una  fotografía  se  implementa  como  una  secuencia  de  tres 
transformaciones: 


■  Transformación  de  la  cámara:  ubica  la  cámara  virtual  en  el  origen  del  sistema 
de  coordenadas  orientada  de  manera  conveniente. 

■  Transformación  de  proyección:  determina  cuánto  del  mundo  3D  es  visible. 
A  este  espacio  limitado  se  le  denomina  volumen  de  la  vista  y  transforma  el 
contenido  de  este  volumen  al  volumen  canónico  de  la  vista. 

■  Transformación  al  área  de  dibujo:  el  contenido  del  volumen  canónico  de  la 
vista  se  transforma  para  ubicarlo  en  el  espacio  de  la  ventana  destinado  a 
mostrar  el  resultado  de  la  vista  2D. 


4.1.  Transformación  de  la  cámara 

La  posición  de  una  cámara  (el  lugar  desde  el  que  se  va  a  tomar  la  fotografía), 
se  establece  especificando  un  punto  p  del  espacio  3D.  Una  vez  posicionada,  la  cá¬ 
mara  se  orienta  de  manera  que  su  objetivo  quede  apuntando  a  un  punto  específico 
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de  la  escena.  A  este  punto  i  se  le  conoce  con  el  nombre  de  punto  de  interés.  En 
general,  los  fotográfos  utilizan  la  cámara  para  hacer  fotos  apaisadas  u  orientadas 
en  vertical,  aunque  tampoco  resulta  extraño  ver  fotografías  tomadas  con  otras  incli¬ 
naciones.  Esta  inclinación  se  establece  mediante  el  vector  UP  denominado  vector 
de  inclinación.  Con  estos  tres  datos  queda  perfectamente  posicionada  y  orientada 
la  cámara,  tal  y  como  se  muestra  en  la  figura  |4~T| 


Figura  4. 1 :  Parámetros  para  ubicar  y  orientar  una  cámara:  p,  posición  de  la  cámara;  UP,  vector  de 
inclinación;  i,  punto  de  interés 

Algunas  de  las  operaciones  que  los  sistemas  gráficos  realizan  requieren  que 
la  cámara  esté  situada  en  el  origen  de  coordenadas,  apuntando  en  la  dirección  del 
eje  Z  negativo  y  coincidiendo  el  vector  de  inclinación  con  el  eje  Y  positivo.  Por 
esta  razón,  es  necesario  aplicar  una  transformación  al  mundo  3D  de  manera  que, 
desde  la  posición  y  orientación  requeridas  por  el  sistema  gráfico,  se  observe  lo 
mismo  que  desde  donde  el  usuario  estableció  su  cámara  (véase  figura  |4~2|).  A  esta 
transformación  se  le  denomina  transformación  de  la  cámara. 


Figura  4.2:  Transformación  de  la  cámara.  La  cámara  situada  en  el  punto  p  en  la  imagen  de  la  izquier¬ 
da  se  transforma  para  quedar  como  se  observa  en  la  imagen  de  la  derecha.  Dicha  transformación  se 
aplica  al  objeto  de  tal  manera  que  lo  que  se  observa  sea  lo  mismo  en  ambas  situaciones 

Si  F  es  el  vector  normalizado  que  desde  la  posición  de  la  cámara  apunta  al 
punto  de  interés,  UP'  es  el  vector  de  inclinación  normalizado,  S  =  F  x  UP'  y 
U  =  S  x  F,  entonces  el  resultado  de  la  siguiente  operación  crea  la  matriz  de 

70 


(cc)  José  Ribelles  y  Ángeles  López 
W  ISBN:  978-84-17429-87-4 


Informática  Gráfica  (2a  edición) 
DOI:  http://dx.doi.org/! 0.603 5/Sapiential  5 1 


transformación  Me  que  sitúa  la  cámara  en  la  posición  y  orientación  requeridas  por 
el  sistema  gráfico: 


S!:, 

Sy 

0\ 

/I 

0 

0 

Px  ^ 

ux 

Uy 

Uz 

0 

0 

1 

0 

-Py 

~FX 

~Fy 

~FZ 

0 

0 

0 

1 

-Pz 

o 

0 

0 

1/ 

^0 

0 

0 

1  / 

4.2.  Transformación  de  proyección 


(4.1) 


El  volumen  de  la  vista  determina  la  parte  del  mundo  3D  que  puede  ser  vista 
por  el  observador.  La  forma  y  dimensión  de  este  volumen  depende  del  tipo  de 
proyección: 

■  Proyección  perspectiva.  Es  similar  a  como  funciona  nuestra  vista  y  se  utiliza 
para  generar  imágenes  más  fieles  a  la  realidad  en  aplicaciones  como  video¬ 
juegos,  simulaciones  o,  en  general,  la  mayor  parte  de  aplicaciones  gráficas. 

■  Proyección  paralela.  Es  la  utilizada  principalmente  en  ingeniería  o  arquitec¬ 
tura.  Se  caracteriza  por  preservar  longitudes  y  ángulos. 

La  figura  |4.3|  muestra  un  ejemplo  de  un  cubo  dibujado  con  ambos  tipos  de 
vistas. 


(a) 


(b) 


Figura  4.3:  Vista  de  un  cubo  obtenida  con:  (a)  proyección  perspectiva  y  (b)  proyección  paralela 


4.2.1.  Proyección  paralela 

Este  tipo  de  proyección  se  caracteriza  por  que  los  rayos  de  proyección  son  pa¬ 
ralelos  entre  sí  e  intersectan  de  forma  perpendicular  con  el  plano  de  proyección.  El 
volumen  de  la  vista  tiene  forma  de  caja,  la  cual,  se  alinea  con  los  ejes  de  coorde¬ 
nadas  tal  y  como  se  muestra  en  la  figura  |4.4[  donde  también  se  han  indicado  los 
nombres  de  los  seis  parámetros  que  definen  dicho  volumen. 
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En  general,  los  sistemas  gráficos  trasladan  y  escalan  esa  caja  de  manera  que  la 
convierten  en  un  cubo  centrado  en  el  origen  de  coordenadas.  A  este  cubo  se  le  de¬ 
nomina  volumen  canónico  de  la  vista  (véase  figura|43])  y  a  las  coordenadas  en  este 
volumen  coordenadas  normalizadas  del  dispositivo.  La  matriz  de  transformación 
correspondiente  para  un  cubo  de  lado  2  es  la  siguiente: 


Mpar  — 


_ 2 _ 

derecha— izquierda 


o 

o 

o 


o 

2 

arriba— abajo 

o 

o 


o 

o 


2 

lejos— cerca 

o 


derecha+izquierda  \ 
derecha— izquierda 
_ arriba+abajo 


arriba— abajo 
_  le jos-\- cerca 


lejos— cerca 

i  / 

(4.2) 


Figura  4.5:  Volumen  canónico  de  la  vista,  cubo  de  lado  2  centrado  en  el  origen  de  coordenadas 
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4.2.2.  Proyección  perspectiva 

Este  tipo  de  proyección  se  caracteriza  por  que  los  rayos  de  proyección  parten 
todos  ellos  desde  la  posición  del  observador.  El  volumen  de  la  vista  tiene  forma 
de  pirámide  truncada,  que  queda  definida  mediante  cuatro  parámetros:  los  planos 
cerca  y  lejos  (los  mismos  que  en  la  proyección  paralela),  el  ángulo  9  en  la  dirección 
y  y  la  relación  de  aspecto  de  la  base  de  la  pirámide  ancho! alto.  En  la  figura  [4~ó| 
se  detallan  estos  parámetros. 


Figura  4.6:  Esquema  del  volumen  de  la  vista  de  una  proyección  perspectiva 


En  general,  los  sistemas  gráficos  convierten  ese  volumen  con  forma  de  pirámi¬ 
de  en  el  volumen  canónico  de  la  vista.  La  matriz  de  transformación  correspondiente 
para  un  cubo  de  lado  2  es  la  siguiente: 


Mper  — 


aspect-tan(6  /  2) 

o 

o 


o 

1 

tan{6 / 2) 

0 

o 


o 

o 

lejos+cerca 
cerca— lejos 

-1 


0  ' 

o 

2 -lejos -cerca 
cerca— lejos 


(4.3) 


Ejercicios  - 

►  4.1  El  resultado  de  una  proyección  perspectiva  depende,  entre  otras  cosas,  de  la  dis¬ 
tancia  de  la  cámara  a  la  escena.  Es  decir,  el  resultado  de  la  proyección  cambia  si  la  cámara 
se  acerca  o  se  aleja  de  la  escena.  Sin  embargo,  si  se  utiliza  proyección  paralela  su  resulta¬ 
do  es  independiente  de  dicha  distancia.  Si  deseas  utilizar  proyección  paralela  y  al  mismo 
tiempo  simular  el  efecto  de  que,  por  ejemplo,  al  acercar  la  cámara  a  la  escena  la  proyección 
aumente,  ¿cómo  lo  harías? 
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4.3.  Transformación  al  área  de  dibujo 

El  área  de  dibujo,  también  conocida  por  su  término  en  inglés  viewport ,  es  la 
parte  de  la  ventana  de  la  aplicación  donde  se  muestra  la  vista  2D.  Por  ejemplo, 
la  figura  [4/7]  muestra  un  canvas  con  tres  áreas  de  dibujo  donde  para  cada  una  de 
ellas  se  muestra  la  misma  escena  pero  vista  desde  una  posición  y  orientación  di¬ 
ferentes.  La  transformación  al  viewport  consiste  en  mover  el  resultado  de  la  pro¬ 
yección  a  dicha  área.  Se  asume  que  la  geometría  a  visualizar  reside  en  el  volumen 
canónico  de  la  vista,  es  decir,  se  cumple  que  las  coordenadas  de  todos  los  puntos 
(x,  y ,  z)  G  [—1,  l]3.  Entonces,  si  nx  y  ny  son  respectivamente  el  ancho  y  el  alto 
del  área  de  dibujo  en  píxeles,  y  ox  y  oy  son  las  coordenadas  de  ventana  del  píxel 
de  la  esquina  inferior  izquierda  del  área  de  dibujo,  para  cualquier  punto  que  resida 
en  el  volumen  canónico  de  la  vista,  sus  coordenadas  de  ventana  se  obtienen  con  la 
siguiente  transformación: 


Mvp  = 


/ nx 

/  2 


0 

o 

Vo 


0  0  ^+ox\ 

Tíy  Tíy  1  i 


0  1  0 

0  0  1  / 


(4.4) 


Figura  4.7:  Ejemplo  de  canvas  con  tres  áreas  de  dibujo  o  viewports.  La  escena  es  la  misma  en  las 
tres  áreas,  sin  embargo,  la  transformación  de  la  cámara  es  distinta  para  cada  área. 


4.4.  Eliminación  de  partes  ocultas 

La  eliminación  de  partes  ocultas  consiste  en  determinar  qué  primitivas  de  la 
escena  son  tapadas  por  otras  primitivas  desde  el  punto  de  vista  del  observador 
(véase  figura|4.8|).  Aunque  para  resolver  este  problema  se  han  desarrollado  diversos 
algoritmos,  el  más  utilizado  en  la  práctica  es  el  algoritmo  conocido  como  z-buffer. 
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(a)  (b) 


Figura  4.8:  Ejemplo  de  escena  visualizada:  (a)  sin  resolver  el  problema  de  la  visibilidad  y  (b)  con  el 
problema  de  la  visibilidad  resuelto 


El  algoritmo  z-buffer  se  caracteriza  por  su  simplicidad.  Para  cada  píxel  de  la 
primitiva  que  se  está  dibujando,  su  valor  de  profundidad  (su  coordenada  z)  se  com¬ 
para  con  el  valor  almacenado  en  un  buffer  denominado  buffer  de  profundidad.  Si 
la  profundidad  de  la  primitiva  para  dicho  píxel  es  menor  que  el  valor  almacenado 
en  el  buffer  para  ese  mismo  píxel,  tanto  el  buffer  de  color  como  el  de  profundidad 
se  actualizan  con  los  valores  de  la  nueva  primitiva,  siendo  eliminado  en  cualquier 
otro  caso. 


El  algoritmo  se  muestra  en  el  listado  [471]  En  este  algoritmo  no  importa  el  orden 
en  que  se  pinten  las  primitivas,  pero  sí  es  muy  importante  que  el  buffer  de  profundi¬ 
dad  se  inicialice  siempre  al  valor  de  profundidad  máxima  antes  de  pintar  la  primera 
primitiva. 


Listado  4.1:  Algoritmo  del  z-buffer 
if  (pixel.z  <  bufferProfundidad  (x  ,  y )  .  z )  { 

buff  erProfundidad  (x  ,  y )  .  z  =  pixel.z; 
bufferColor (x , y ) . color  =  pixel . color ; 

1 


4.5.  Viendo  en  3D  con  WebGL 

Hasta  ahora,  en  los  ejercicios  realizados  en  los  capítulos  anteriores,  se  ha  con¬ 
seguido  visualizar  modelos  sin  tener  que  realizar  ni  la  transformación  de  la  cámara 
ni  establecer  un  tipo  de  proyección.  Esto  ocurre  porque  la  escena  a  visualizar  se  ha 
definido  de  manera  que  quedase  dentro  del  volumen  canónico  de  la  vista.  De  esta 
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forma  se  obtiene  una  proyección  paralela  del  contenido  del  volumen  observando  la 
escena  en  dirección  del  eje  —  Z. 

En  este  capítulo  se  ha  visto  cómo  construir  la  matriz  de  transformación  de  la 
cámara  para  poder  observar  la  escena  desde  cualquier  punto  de  vista,  y  la  matriz  de 
proyección  para  poder  elegir  entre  vista  paralela  y  vista  perspectiva.  En  WebGL  es 
responsabilidad  del  programador  calcular  estas  matrices  y  operarlas  con  cada  uno 
de  los  vértices  del  modelo. 

Habitualmente,  la  matriz  de  la  cámara  se  opera  con  la  de  transformación  del 
modelo,  creando  la  transformación  conocida  con  el  nombre  de  modelo-vista .  Esta 
matriz  y  la  de  proyección  se  suministran  al  procesador  de  vértices,  donde  cada 
vértice  v  debe  ser  multiplicado  por  ambas  matrices.  Si  Me  es  la  matriz  de  trans¬ 
formación  de  la  cámara,  Mm  es  la  matriz  de  transformación  del  modelo,  y  Mmv  es 
la  matriz  modelo- vista,  es  decir  Mmv  =  Me  •  Mm ,  el  nuevo  vértice  v'  se  obtiene 
como  resultado  de  la  siguiente  operación:  v'  =  Mproy  •  Mmv  *  v\  donde  Mproy 
será  Mpar  o  Mper.  El  listado 


4.2 


recoge  estas  operaciones. 


Listado  4.2:  Shader  de  vértices  para  transformar  la  posición  de  cada  vértice 
#version  300  es 

uniform  mat4  proj  ectionMatrix  ;  //  perspectiva  o  paralela 

uniform  mat4  modelViewMatrix ;  //  cameraMatrix  *  modelMatrix 

in  vec3  VertexPosition  ; 

void  main()  { 

gl_Position  =  proj  ectionMatrix  * 
modelViewMatrix  * 
vec4  (  VertexPosition  ,1.0)  ; 


La  librería  glMatrix  proporciona  diversas  funciones  para  construir  las  matri¬ 
ces  vistas  en  este  capítulo.  Así,  la  función  mat4.lookAt  construye  la  matriz  de  trans¬ 
formación  de  la  cámara  (ecuación  |4.1|),  a  partir  de  la  posición  de  la  cámara  p9  el 
punto  de  interés  i  y  el  vector  de  inclinación  UP.  Además,  las  funciones  mat4.ortho 
y  mat4.perspective  construyen  las  matrices  que  transforman  el  volumen  de  la  vista 
de  una  proyección  paralela  y  perspectiva,  respectivamente,  al  volumen  canónico  de 
la  vista.  Son  estas: 


■  mat4.1ookAt  (out,  p,  i,  UP) 

■  mat4.ortho  (out,  izquierda,  derecha,  abajo,  arriba, 
cerca,  lejos) 

■  mat 4 . perspect ive  (out,  0,  ancho/alto,  cerca,  lejos) 
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Tras  el  procesamiento  de  los  vértices,  estos  se  reagrupan  dependiendo  del  tipo 
de  primitiva  que  se  esté  dibujando.  Esto  ocurre  en  la  etapa  de  procesado  de  la 
primitiva  (véase  figura|4.9|).  A  continuación  se  realiza  la  operación  conocida  con  el 
nombre  de  división  perspectiva ,  que  consiste  en  que  cada  vértice  sea  dividido  por 
su  propia  w  (la  cuarta  coordenada  del  vértice).  Esto  es  necesario,  ya  que  el  resul¬ 
tado  de  la  proyección  perspectiva  puede  hacer  que  la  coordenada  w  del  vértice  sea 
distinta  de  1 . 


Figura  4.9:  En  color  amarillo,  las  tareas  principales  que  se  realizan  en  la  etapa  correspondiente  al 
procesado  de  la  primitiva 

La  transformación  al  área  de  dibujo  se  realiza  a  continuación,  aún  en  la  misma 
etapa.  El  programador  solo  debe  especificar  la  ubicación  del  viewport  en  el  canvas 
mediante  la  orden  gl.viewport ,  indicando  la  esquina  inferior  izquierda,  el  ancho  y 
el  alto  en  coordenadas  de  ventana: 

■  gl.viewport  (x,  y,  ancho ,  alto) 

La  figura  |4. 1 0|  muestra  el  origen  y  tamaño  de  cada  una  de  las  tres  áreas  de  di¬ 
bujo  del  ejemplo  de  la  figura [4/7] teniendo  en  cuenta  que  el  canvas  es  de  800  x  600 
píxeles. 

Además,  la  llamada  a  la  función  gl.viewport  debe  realizarse  cada  vez  que  se 
produzca  un  cambio  en  el  tamaño  del  canvas  con  el  fin  de  mantener  el  tamaño  del 
viewport  actualizado.  Es  muy  importante  que  la  relación  de  aspecto  del  viewport 
sea  igual  a  la  relación  de  aspecto  utilizada  al  definir  el  volumen  de  la  vista  para  no 
deformar  el  resultado  de  la  proyección  (véase  figura|4.11|). 

La  última  tarea  dentro  de  la  etapa  de  procesado  de  la  primitiva  es  la  operación 
de  recortado,  que  consiste  en  eliminar  los  elementos  que  quedan  fuera  de  los  límites 
establecidos  por  el  volumen  de  la  vista.  Si  una  primitiva  intersecta  con  el  volumen 
de  la  vista,  se  recorta  de  manera  que  por  el  pipeline  únicamente  continúen  los  trozos 
que  han  quedado  dentro  del  volumen  de  la  vista.  Por  ejemplo,  la  figura |4T2| mues¬ 
tra  un  cono  en  el  que  su  vértice  queda  fuera  del  volumen  de  la  vista  produciendo  el 
efecto  de  cono  truncado. 
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400x600 

(400,300) 

400x300 

(0,0) 

(400,0) 

Figura  4.10:  Ejemplo  de  tres  áreas  de  dibujo  o  viewports  en  los  que  se  especifica  para  cada  uno  de 
ellos  su  origen  y  tamaño 


Volumen  de  la  vista 


Volumen  canónico 
de  la  vista 


Viewport  con  la  misma 
relación  de  aspecto 


Viewport  con  diferente 
relación  de  aspecto 


Figura  4.11:  Si  la  proporción  del  volumen  de  la  vista  y  del  área  de  dibujo  ( viewport )  coinciden  no 
se  producirá  ningún  tipo  de  deformación  en  la  escena  visualizada 


Figura  4.12:  El  vértice  del  cono  en  la  imagen  de  la  derecha  queda  fuera  del  volumen  de  la  vista  y  se 
puede  apreciar  el  resultado  de  la  operación  de  recortado 
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Respecto  a  la  eliminación  de  partes  ocultas,  WebGL  implementa  el  algoritmo 
del  z-buffer  y  la  GPU  comprueba  la  profundidad  de  cada  fragmento  de  forma  fi¬ 
ja  en  la  etapa  de  procesado  del  fragmento,  pero  después  de  ejecutar  el  shader  de 
fragmentos  (véase  figura [4713]).  A  esta  comprobación  se  le  denomina  test  de  pro¬ 
fundidad.  Aunque  esta  operación  está  implementada  en  la  GPU,  el  programador 
aún  debe  realizar  dos  tareas: 

1.  Habilitar  la  operación  del  test  de  profundidad  (ya  que  por  defecto  no  se  rea¬ 
liza): 

■  gl.enable  (gl . DEPTH_TEST) ; 

2.  Inicializar  el  buffer  a  la  profundidad  máxima  antes  de  comenzar  a  dibujar: 

■  gl.clear  (...  |  gl . DEPTH_BUFFER_BIT) ; 


Figura  4.13:  En  color  amarillo,  las  tareas  principales  que  se  realizan  en  la  etapa  correspondiente  al 
procesado  del  fragmento  donde  se  indica  que  el  test  de  profundidad  se  realiza  con  posterioridad  a  la 
ejecución  del  shader  de  fragmentos  y  de  manera  opcional 


Ejercicios  - 

►  4.2  Carga  la  página  c04/muev eLaCamara.html.  Compmeba  que  se  ha  añadido  una 
cámara  interactiva  que  puedes  modificar  utilizando  el  ratón  y  la  tecla  shift.  Edita  el  fichero 
c04/mueveLaCamara.js  y  estudia  la  función  getCameraMatrix ,  que  devuelve  la  matriz  de 
transformación  de  la  cámara,  ¿cuál  es  el  punto  de  interés  establecido?  Estudia  también  la 
función  setProjection ,  ¿qué  tipo  de  proyección  se  utiliza?,  ¿qué  cambios  harías  para  utilizar 
el  otro  tipo  de  proyección  visto  en  este  capítulo? 

►  4.3  Amplía  la  solución  del  ejercicio  anterior  para  que  se  pueda  cambiar  de  proyección 
paralela  a  perspectiva,  y  viceversa,  y  que  sin  modificar  la  matriz  de  transformación  de  la 
cámara  se  siga  observando  el  modelo  completo. 

►  4.4  Parte,  por  ejemplo,  del  modelo  del  tanque  que  ya  hiciste  en  el  capítulo  anterior 
y  modifícalo  para  que  en  el  can  vas  se  muestren  cuatro  áreas  de  dibujo.  Utiliza  proyección 
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paralela  en  las  cuatro  áreas  pero  haz  que  en  tres  de  ellas  la  dirección  de  la  vista  coincida 
con  uno  de  los  ejes  de  coordenadas  y  que  la  cuarta  sea  en  dirección  (1,1,1).  En  todas  ellas 
el  modelo  debe  observarse  en  su  totalidad. 

►  4.5  Amplía  la  solución  del  ejercicio  4.4  para  que  se  realice  la  eliminación  de  las  partes 
ocultas.  Para  observarlo  mejor,  utiliza  un  color  diferente  para  cada  primitiva  y  dibújalas 
como  triángulos,  no  como  líneas. 


Cuestiones  - 

►  4.1  ¿Qué  es  la  matriz  de  transformación  de  proyección?  ¿y  de  qué  tipos  conoces? 

►  4.2  ¿Qué  significa  cada  uno  de  los  parámetros  de  la  función  perspect  ive?  Dibú¬ 
jalo  en  papel. 

►  4.3  ¿Qué  función  de  la  librería  glMatrix  utilizarás  si  quieres  trabajar  con  proyección 
paralela? 

►  4.4  ¿Qué  función  de  la  librería  glMatrix  te  permite  obtener  fácilmente  la  matriz  de 
transformación  de  la  cámara? 

►  4.5  ¿Qué  dos  matrices  se  operan  habitualmente  entre  ellas  para  crear  la  matriz 
modelo-vista? 

►  4.6  En  el  shader  de  vértices,  ¿en  qué  orden  debes  operar  cada  vértice  con  las  matrices 
de  proyección,  cámara  y  modelo? 

►  4.7  Si  el  usuario  modifica  de  manera  interactiva  la  posición  de  la  cámara,  está  claro 
que  para  obtener  la  nueva  vista  debes  obtener  la  nueva  matriz  de  transformación  de  la 
cámara  pero,  ¿te  sigue  valiendo  la  matriz  de  transformación  de  proyección  que  ya  tenías  o 
por  el  contrario  también  debes  obtenerla? 

►  4.8  Con  el  test  de  profundidad  habilitado,  describe  qué  ocurre  si  al  dibujar  no  inicia- 
lizas  a  la  máxima  profundidad  el  buffer  correspondiente. 

►  4.9  Ordena  de  manera  temporal  (primero  la  que  se  hace  antes)  las  siguientes  tareas 
que  se  realizan  en  el  pipeline  del  sistema  gráfico:  transformación  al  área  de  dibujo,  test 
de  profundidad,  transformación  de  la  cámara,  división  perspectiva  y  asignación  de  color  al 
fragmento. 

►  4.10  Explica  el  problema  que  aparece  cuando  la  razón  de  aspecto  definida  en  el  modelo 
de  cámara  es  diferente  de  la  relación  de  aspecto  del  área  de  dibujo.  Pon  algún  ejemplo  que 
lo  ilustre.  Explica  qué  transformaciones  están  involucradas  en  ese  proceso.  Explica  también 
cómo  resolverías  este  problema. 
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Modelos  de  iluminación  y 
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«In  trying  to  improve  the  quality  of  the  synthetic  images,  we  do  not  ex- 
pect  to  be  able  to  display  the  object  exactly  as  it  would  appear  in  reality, 
with  texture,  overcast  shadows,  etc.  We  hope  only  to  display  an  image  that 
approximates  the  real  object  closely  enough  to  provide  a  certain  degree  of 
realism». 

Bui  Tuong  Phong,  1975 
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5.1.  Modelo  de  iluminación  de  Phong 

El  modelo  de  iluminación  de  Phong  tiene  en  cuenta  los  tres  aspectos  siguientes: 

■  Luz  ambiente:  luz  que  proporciona  iluminación  uniforme  a  lo  largo  de  la 
escena  (véase  figura |5.1  (a)]). 

■  Reflexión  difusa:  luz  reflejada  por  la  superficie  en  todas  las  direcciones  (véa¬ 
se  figura[5?T(b)|). 

■  Reflexión  especular:  luz  reflejada  por  la  superficie  en  una  sola  dirección  o 
en  un  rango  de  ángulos  muy  cercano  al  ángulo  de  reflexión  perfecta  (véase 


figura  [5TT(c)]). 


(a) 


(b) 


(c) 


Figura  5.1:  Ejemplo  de  las  componentes  del  modelo  de  iluminación  de  Phong:  (a)  Luz  ambiente;  (b) 
Reflexión  difusa;  (c)  Reflexión  especular 

Y  la  combinación  de  estos  tres  aspectos  produce  el  resultado  que  se  muestra  en 


Figura  5.2:  Ejemplo  obtenido  utilizando  el  modelo  de  iluminación  de  Phong 
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5.1.1.  Luz  ambiente 


El  modelo  de  Phong  establece  que  la  luz  ambiente  en  una  escena  es  constante. 
Esto  produce  que  la  iluminación  que  se  observa  en  cualquier  punto  de  la  superficie 
de  un  objeto  debida  a  la  luz  ambiente  sea  siempre  la  misma.  Sin  embargo,  los  dife¬ 
rentes  objetos  de  la  escena  pueden  estar  construidos  de  diferentes  materiales  y  cada 
material  puede  reflejar  en  mayor  o  menor  medida  la  luz  ambiente.  El  modelo  de 
Phong  modela  este  efecto  con  el  coeficiente  ka,  0  <  ka  <  1,  que  será  característico 
de  cada  material. 

Si  La  es  la  luz  ambiente,  la  iluminación  ambiente  Ia  que  se  observa  en  un  pun¬ 
to  de  la  escena  depende  tanto  de  dicha  luz  como  del  material  del  objeto  y  se  calcula 
de  la  siguiente  manera: 


la  —  kaLa 


(5.1) 


La  fi gura |5. 3 (a)| muestra  un  ejemplo  en  el  que  el  modelo  de  iluminación  única¬ 
mente  incluye  luz  ambiente. 


(a)  (b)  (c) 


Figura  5.3:  Ejemplos  de  iluminación:  (a)  Solo  luz  ambiente;  (b)  Luz  ambiente  y  reflexión  difusa; 
(c)  Luz  ambiente,  reflexión  difusa  y  reflexión  especular 


5.1.2.  Reflexión  difusa 

La  reflexión  difusa  es  característica  de  superficies  rugosas,  mates,  sin  brillo. 
El  modelo  de  Phong  establece  que  para  modelar  este  tipo  de  reflexión  se  utilice  la 
ley  de  Lambert.  Así,  la  iluminación  observada  en  un  punto  de  la  superficie  de  un 
objeto  depende  del  ángulo  9,  0  <  0  <  90,  entre  la  dirección  a  la  fuente  de  luz  L  y 
la  normal  N  de  la  superficie  en  dicho  punto  (véase  figura |54|).  De  manera  similar 
a  la  luz  ambiente,  el  modelo  de  Phong  también  tiene  en  cuenta  que  el  material  del 
objeto  influye  en  la  cantidad  de  luz  reflejada  y  propone  utilizar  el  coeficiente  k¿, 
0  <  kd  <  1,  que  también  será  propio  del  material. 

Dada  una  fuente  de  luz,  si  L  y  N  son  vectores  unitarios  y  L ¿  es  la  cantidad  de 
luz  producida  por  dicha  fuente,  la  iluminación  observada  en  un  punto  de  la  super- 
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ficie  de  un  objeto  debido  a  la  reflexión  difusa,  Id,  se  obtiene  mediante  la  siguiente 
ecuación: 


Id  =  kdLd eos 6  =  kdLd(L  ■  N ) 


(5.2) 


La  figura|5.3(b)]muestra  un  ejemplo  en  el  que  el  modelo  de  iluminación  incluye 


luz  ambiente  y  reflexión  difusa. 


N 


L 


Figura  5.4:  Vectores  involucrados  en  el  cálculo  de  la  reflexión  difusa 


5.1.3.  Reflexión  especular 

Este  tipo  de  reflexión  es  propia  de  superficies  brillantes,  pulidas,  y  es  respon¬ 
sable  de  los  brillos  que  suelen  observarse  en  esos  tipos  de  superficies.  Su  principal 
característica  es  que  este  tipo  de  reflexión  depende  de  la  posición  del  observador. 
También  ocurre  que  el  color  del  brillo  suele  ser  diferente  del  color  de  la  superficie 
del  objeto  y  más  bien  parecido  al  color  de  la  luz  cuya  fuente  es  responsable  del 
brillo. 

El  modelo  de  Phong  establece  que  la  luz  que  llega  al  observador  depende 
del  ángulo  <f>  entre  el  vector  de  reflexión  perfecta  i?  y  el  vector  de  dirección  al 
observador  V  (véase  figura |5. 5 1).  De  manera  similar  a  las  otras  dos  componentes,  el 
modelo  de  Phong  también  tiene  en  cuenta  que  el  material  del  objeto  influye  en  la 
cantidad  de  luz  especular  reflejada  y  utiliza  el  coeficiente  ks,  0  <  ks  <  1,  que  será 
propio  del  material.  Además,  propone  modelar  el  tamaño  del  brillo,  a ,  como  expo¬ 
nente  del  producto  escalar  de  los  vectores  R  y  V  y  que  al  igual  que  la  k¿  dependa 
del  material  del  objeto. 

Dada  una  fuente  de  luz,  si  R  y  V  son  vectores  unitarios  y  Ls  es  la  cantidad  de 
luz  producida  por  dicha  fuente,  la  iluminación  observada  en  un  punto  de  la  superfi¬ 
cie  de  un  objeto  debido  a  la  reflexión  especular,  Is ,  se  obtiene  mediante  la  siguiente 
ecuación: 


Is  =  ksLs  cosa  $  =  ksLs(R  •  V)a 


(5.3) 
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donde  R  se  obtiene  de  la  siguiente  manera: 


R  =  2 N(N  L)-L  (5.4) 

Señalar  que  GLSL  proporciona  la  función  reflect  que  implementa  el  cálculo  del 
vector  R: 

■  R  =  reflect  (I,  N)  ; 
donde  /  es  el  vector  incidente,  es  decir,  /  =  —  L. 


¿X- 


Figura  5.5:  Vectores  involucrados  en  el  cálculo  de  la  reflexión  especular 


La  figura|5.3(c)|muestra  un  ejemplo  en  el  que  el  modelo  de  iluminación  incluye 
luz  ambiente,  reflexión  difusa  y  reflexión  especular. 

Respecto  al  valor  de  a ,  un  valor  igual  a  1  modela  un  brillo  grande,  mientras 
que  valores  mucho  mayores,  por  ejemplo,  entre  100  y  500,  modelan  brillos  más 
pequeños,  propios  de  materiales,  por  ejemplo,  metálicos.  La  figura  |5.6|  muestra 
varios  ejemplos  obtenidos  con  distintos  valores  de  a. 


(a)  a  =  3  (b)  a  =  10  (c)  a  =  100 

Figura  5.6:  Ejemplos  de  iluminación  con  diferentes  valores  de  a  para  el  cálculo  de  la  reflexión 
especular 
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El  vector  intermedio 


El  uso  de  la  función  reflect  es  caro.  En  su  lugar,  se  propone  a  modo  de 
optimización  utilizar  el  vector  intermedio,  H.  Este  vector  se  calcula  como  la  suma 
de  los  vectores  L  y  V  (véase  figura|5.7|).  En  el  modelo  de  Phong,  la  reflexión  espe¬ 
cular  se  calcula  ahora  a  partir  del  producto  escalar  entre  el  vector  intermedio  y  la 
normal  de  la  siguiente  forma: 


H  =  L  +  V 

Is  =  ksLs{N  •  H)a 


Figura  5.7:  Vectores  involucrados  en  el  cálculo  de  la  reflexión  especular  con  el  vector  intermedio 


5.1.4.  Atenuación 

Para  tener  en  cuenta  la  atenuación  que  sufre  la  luz  al  viajar  desde  su  fuente  de 
origen  hasta  la  superficie  del  objeto  situado  a  una  distancia  d  (véase  figura [578]),  el 
modelo  de  Phong  establece  utilizar  la  siguiente  ecuación  donde  los  coeficientes  a, 
b  y  c  son  constantes  características  de  la  fuente  de  luz: 

attenuationF  actor  —  - — - -7  (5.6) 

a  +  bd  +  cd 2 


Figura  5.8:  Ejemplo  de  escena  sin  atenuación  (izquierda)  y  con  atenuación  de  la  luz  (derecha) 
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5.1.5.  Materiales 


El  modelo  de  iluminación  de  Phong  tiene  en  cuenta  las  propiedades  del  ma¬ 
terial  del  objeto  al  calcular  la  iluminación  y  así  proporcionar  mayor  realismo.  En 


muestra  una  lista  de  materiales  con  los  valores  de  ejemplo  para  estas  constantes.  Y 
la  figura |^9] muestra  algunos  resultados  de  su  aplicación. 


concreto  son  cuatro:  ambiente  ka,  difusa  k¿,  especular  ks  y  brillo  a.  La  tabla  5.1 


Esmeralda 

”ka”  :  [0.022,  0.17,0.02] 

”fcd”  :  [0.08,0.61,0.08] 

”ks”  :  [0.63,0.73,0.63] 

”  a”  :  [0.6] 

Obsidiana 

”fca”  :  [0.05,  0.05,0.07] 
”fcd”  :  [0.18,0.17,  0.23] 

”  ks”  :  [0.33,0.33,0.35] 
”a”:  [0.30] 

Rubí 

”ka”  :  [0.18,  0.01,0.01] 
”fcd”  :  [0.61,0.04,0.04] 
”ks”  :  [0.73,0.63,0.63] 
”a”:  [0.60] 

Bronce 

nka”  :  [0.21,0.13,0.05] 
”kd”  :  [0.71,0.43,0.18] 

:  [0.39,0.27,0.17] 

”  a” :  [0.20] 

Oro 

”ka”  :  [0.25,  0.20,  0.07] 
”fcd”  :  [0.75,0.61,0.23] 

”  k3”  :  [0.63,0.56,0.37] 
”a”:  [0.40] 

Plástico 

”ka”  :  [0.0,  0.0,  0.0  ] 

”fed”  :  [0.55,0.55,0.55  ] 
”ks”  :  [0.70,0.70,  0.70] 
”a”:  [0.25] 

Jade 

”/ea”  :  [0.14,  0.22,  0.16] 
”kd ”  :  [0.54,0.89,0.63] 
”ks”  :  [0.32,0.32,0.32] 
na”  :  [0.10] 

Perla 

”ka”  :  [0.25,  0.21,0.21] 
”kd”  :  [1.0,  0.83,0.83] 
”fcs”  :  [0.30,0.30,0.30] 

”  a” :  [0.09] 

Turquesa 

”  kav  :  [0.10,  0.19,  0.17] 

:  [0.39,0.74,0.69] 
”ks”  :  [0.29,0.31,0.31] 
”a”:  [0.10] 

Cobre 

”fca”  :  [0.19,  0.07,  0.02] 
”kd”  :  [0.71,0.27,0.08] 
”ks”  :  [0.26,0.14,0.09] 

” a”:  [0.10] 

Plata 

”/ca”  :  [0.20,  0.20,  0.20] 
”kd”  :  [0.51,0.51,0.51] 
”fcs”  :  [0.51,0.51,0.51] 
”a”:  [0.40] 

Goma 

”/ca”  :  [0.05,  0.05,  0.05] 

:  [0.50,0.50,0.50] 
”fcs”  :  [0.70,0.70,0.70] 
”a”:  [0.08] 

Tabla  5.1:  Ejemplos  de  propiedades  de  algunos  materiales  para  el  modelo  de  Phong 


5.1.6.  El  modelo  de  Phong 


A  partir  de  las  ecuaciones|5.1[|5.2[|5.3|y|5.6|se  define  el  modelo  de  iluminación 
de  Phong  como: 


I  —  kaLa  + 


1 


-  +  bd  +  ccP 


(kdLd(L  •  N)  +  ksLs(R  •  V)c 


(5.7) 


El  listado 


5.1 


muestra  la  función  que  calcula  la  iluminación  en  un  punto  sin  incluir 


el  factor  de  atenuación.  En  el  caso  de  tener  múltiples  fuentes  de  luz,  hay  que  sumar 
los  términos  de  cada  una  de  ellas: 


I  =  kaLa+  y 


1 


1  <i<m 


a¿  +  bid  +  Cid 2 


(kdLdi  (Li  ■  N )  +  ksLSi  (. Ri  ■  V)a)  (5.8) 
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Figura  5.9:  Ejemplos  de  materiales,  de  izquierda  a  derecha  y  de  arriba  a  abajo:  Oro,  Cobre,  Plata, 
Obsidiana,  Jade,  Rubí,  Bronce,  Turquesa. 


Listado  5.1:  Función  que  implementa  para  una  fuente  de  luz  el  modelo  de  iluminación  de  Phong  sin 
incluir  el  factor  de  atenuación 


struct  LightData  { 

vec3  Position  ;  //  Posición  en  coordenadas  del  ojo 

vec3  La;  //  Ambiente 

vec3  Ld;  //  Difusa 

vec3  Ls ;  //  Especular 

}; 

uniform  LightData  Light ; 


struct  MaterialDa 
vec3  Ka; 
vec3  Kd; 
vec3  Ks ; 
float  alpha  ; 

}; 

uniform  MaterialD 


a  { 

//  Ambiente 
/  /  D  ifu  s  a 
//  Especular 
/ /  Brillo  especular 

ita  Material  ; 


//  N,  L  y  V  se  asumen  normalizados 

vec3  phong  (vec3  N,  vec3  L,  vec3  V)  { 

vec3  ambient  =  Material. Ka  *  Light. La; 
vec3  diffuse  =  vec3(0.0); 
vec3  specular  =  vec3(0.0); 
float  NdotL  =  dot  (N,L)  ; 

if  (NdotL  >  0.0)  { 

vec3  R  =  reflect(— L,  N)  ; 

float  RdotV_n  =  pow(max(0.0,  dot(R,V)),  Material  .  alpha )  ; 
diffuse  =  NdotL  *  (Light. Ld  *  Material  .Kd)  ; 
specular  =  RdotV_n  *  (Light. Ls  *  Material  .  Ks)  ; 

} 

return  (ambient  +  diffuse  +  specular); 
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Ejercicios 


►  5.1  Si  deseas  incorporar  el  factor  de  atenuación  en  la  función  del  listado 
estructura  habría  que  incluir  los  parámetros  a,  b  y  c? 

►  5.2  Indica  los  cambios  que  realizarías  en  la  función  del  listado 
la  optimización  que  propone  el  método  del  vector  intermedio. 


5.1 


¿en  que 


5.1 


para  implementar 


5.2.  Tipos  de  fuentes  de  luz 

En  general,  siempre  se  han  considerado  dos  tipos  de  fuentes  de  luz  dependiendo 
de  su  posición: 

■  Posicional:  la  fuente  emite  luz  en  todas  las  direcciones  desde  un  punto  dado, 
muy  parecido  a  como  ilumina  una  bombilla,  por  ejemplo. 

■  Direccional:  la  fuente  está  ubicada  en  el  infinito,  todos  los  rayos  de  luz  son 
paralelos  y  viajan  en  la  misma  dirección.  En  este  caso  el  vector  L  en  el 
modelo  de  iluminación  de  Phong  es  constante. 

En  ocasiones  se  desea  restringir  los  efectos  de  una  fuente  de  luz  posicional  a 
un  área  limitada  de  la  escena,  tal  y  como  haría,  por  ejemplo,  una  linterna.  A  este 
tipo  de  fuente  posicional  se  le  denomina  foco  (véase  figura |5dÜ|). 


Figura  5.10:  Ejemplo  de  escena  iluminada:  a  la  izquierda,  con  una  luz  posicional  y  a  la  derecha,  con 
la  fuente  convertida  en  foco 

A  diferencia  de  una  luz  posicional,  un  foco  viene  dado,  además  de  por  su  posi¬ 
ción,  por  la  dirección  S  y  el  ángulo  S  que  determinan  la  forma  del  cono,  tal  y  como 
se  muestra  en  la  figura  |5.11|  Un  fragmento  es  iluminado  por  el  foco  solo  si  está 
dentro  del  cono  de  luz.  Esto  se  averigua  calculando  el  ángulo  entre  el  vector  L  y  el 
vector  S.  Si  el  resultado  es  mayor  que  el  ángulo  S  es  que  ese  fragmento  está  fuera 
del  cono,  siendo,  en  consecuencia,  afectado  únicamente  por  la  luz  ambiente. 

Además,  se  puede  considerar  que  la  intensidad  de  la  luz  decae  a  medida  que 
los  rayos  se  separan  del  eje  del  cono.  Esta  atenuación  se  calcula  mediante  el  coseno 
del  ángulo  entre  los  vectores  L  y  S  elevado  a  un  exponente.  Cuanto  mayor  sea  este 
exponente,  mayor  será  la  concentración  de  luz  alrededor  del  eje  del  cono  (véase 
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Figura  5.11:  Parámetros  característicos  de  un  foco  de  luz 


figura |5TTÜ|  imagen  de  la  derecha).  Finalmente,  el  factor  de  atenuación  calculado 
se  incorpora  al  modelo  de  iluminación  de  Phong,  multiplicando  el  factor  de  ate¬ 
nuación  que  ya  existía.  El  listado  [5T2]  muestra  el  nuevo  shader  que  implementa  el 
foco  de  luz  (la  estructura  LightData  muestra  solo  los  campos  nuevos). 


Listado  5.2:  Shader  para  calcular  la  iluminación  con  un  foco  de  luz 


struct  LightData  {  //  Solo  figuran  los  campos  nuevos 

vec3  Direction  ;  //  Dirección  de  la  luz  en  coordenadas  del  ojo 

float  Exponent ;  //  Atenuación 

float  Cutoff ;  //  Angulo  de  corte  en  grados 

} 

uniform  LightData  Light ; 

vec3  phong  (vec3  N,  vec3  L,  vec3  V)  { 


vec3  ambient 
vec3  diffuse 
vec3  specular 
float  NdotL 
float  spotFactor 


Material. Ka  *  Light. La; 
vec3 (0.0)  ; 
vec3 (0.0)  ; 
dot  (N,L)  ; 

1.0; 


if  (NdotL  >  0.0)  { 


vec3  S  =  normalize  ( Light  .  Po sition  —  ec); 

float  angle  =  acos(dot(— S,  Light  .  Direction  ))  ; 

float  cutoff  =  radians  ( clamp  (  Light .  Cutoff  ,  0.0,  90.0)); 

if  (angle  <  cutoff)  { 

spotFactor=  pow  (  dot(  — S  ,  Light  .  Direction  ),  Light  .  Exponent )  ; 
vec3  R  =  reflect(— L,  N)  ; 

float  RdotV_n  =  pow(max(0.0,  dot(R,V)),  Material  .  alpha )  ; 

diffuse  =  NdotL  *  (Light. Ld  *  Material  . Kd)  ; 
specular  =  RdotV_n  *  (Light. Ls  *  Material  .  Ks)  ; 

} 

} 


return  (ambient  +  spotFactor  *  (diffuse  +  specular)); 
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5.3.  Modelos  de  sombreado 


Un  modelo  de  iluminación  determina  el  color  de  la  superficie  en  un  punto.  Un 
modelo  de  sombreado  utiliza  un  modelo  de  iluminación  y  especifica  cuándo  usarlo. 
Dados  un  polígono  y  un  modelo  de  iluminación,  hay  tres  métodos  para  determinar 
el  color  de  cada  fragmento: 


Plano:  el  modelo  de  iluminación  se  aplica  una  sola  vez  y  su  resultado  se 
aplica  a  toda  la  superficie  del  polígono.  Este  método  requiere  la  normal  de 
cada  polígono.  Un  ejemplo  del  resultado  obtenido  se  muestra  en  la  figura 


5.12(a)  Para  obtener  este  tipo  de  sombreado  en  WebGL  2.0  hay  que  utilizar 


el  calificador  fíat  con  la  variable  que  almacene  el  color  (tanto  en  el  shader  de 
vértices  como  en  el  de  fragmentos)  para  evitar  que  precisamente  se  realice 
la  interpolación  del  color  por  fragmento. 

Gouraud:  el  modelo  de  iluminación  se  aplica  en  cada  vértice  del  polígono 
y  los  resultados  se  interpolan  sobre  su  superficie.  Este  método  requiere  la 
normal  en  cada  uno  de  los  vértices  del  polígono.  Un  ejemplo  del  resultado 


obtenido  se  muestra  en  la  figura  |5.12(b)|  El  listado  |5.3|  muestra  el  shader 
correspondiente  a  este  modelo  de  sombreado. 

Phong:  el  modelo  de  iluminación  se  aplica  para  cada  fragmento.  Este  método 
requiere  la  normal  en  el  fragmento,  que  se  puede  obtener  por  interpolación 
de  las  normales  de  los  vértices.  Un  ejemplo  del  resultado  obtenido  se  muestra 
en  la  figura [5TT2(c)|  El  listado  [5~4]  muestra  el  shader  correspondiente  a  este 
modelo  de  sombreado. 


(a)  Plano  (b)  Gouraud  (c)  Phong 

Figura  5.12:  Resultados  obtenidos  utilizando  los  diferentes  modelos  de  sombreado 
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Listado  5.3:  Shader  para  realizar  un  sombreado  de  Gouraud 


#version  300  es  //  Shader  de  vértices 
uniform  mat4  pr oj ectionMatrix  ; 

uniform  mat4  modelViewMatrix  ; 

uniform  mat3  normalMatrix  ; 

in  vec3  VertexPosition  ; 
in  vec3  VertexNormal ; 

out  vec3  colorOut  ; 


//  ...  aquí  va  el  código  del  listado  5.1  ó  5.2 
void  main()  { 


vec3  N  = 

vec4  ecPosition  = 

vec3  ec  = 

vec3  L  = 

vec3  V  = 


normalize  ( normalMatrix  *  VertexNormal); 
modelViewMatrix  *  vec4  (  VertexPosition  ,  1.0); 

vec3  (ecPosition); 
normalize  (  Light  .  Po  sition  —  ec); 
normalize(— ec )  ; 


colorOut 
gl_Po  sition 


=  phong  (N,  L ,  V)  ; 

=  proj ectionMatrix  *  ecPosition; 


#version  300  es  //  Shader  de  fragmentos 
precisión  mediump  float  ; 

in  vec3  colorOut  ; 
out  vec4  fragmentColor ; 

void  main()  { 

fragmentColor  =  vec4  (  colorOut  ,  1 )  ; 

¡ 


Listado  5.4:  Shader  para  realizar  un  sombreado  de  Phong 

#version  300  es  //  Shader  de  vértices 

uniform  mat4  proj  ectionMatrix  ,  modelViewMatrix; 

uniform  mat3  normalMatrix  ; 

in  vec3  VertexPosition; 
in  vec3  VertexNormal; 

out  vec3  N,  ec ; 

void  main()  { 

N 

vec4  ecPosition 
ec 

gl_Po  sition 

i 


=  normalize  ( normalMatrix  *  VertexNormal); 

=  modelViewMatrix  *  vec4  ( VertexPosition  ,  1.0); 

=  vec3  (  ecPo sition  )  ; 

=  proj ectionM atrix  *  ecPosition; 
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#version  300  es  //  Shader  de  fragmentos 
precisión  mediump  float  ; 


// 


aquí  va  el  código  del  listado  5.1  ó  5.2 


in  vec3  N,  ec ; 

out  vec4  fragmentColor ; 


void  main()  { 

vec3  n 
vec3  L 
vec3  Y 

fragmentColor 


normalize  (N)  ; 
normalize  (Light.  Position 
normalize(—  ec )  ; 
vec4 (phong (n ,L,V) ,  1.0); 


—  ec )  : 


5.4.  Implementación  de  Phong  con  WebGL 

5.4.1.  Normales  en  los  vértices 

Para  poder  aplicar  el  modelo  de  iluminación  de  Phong,  es  necesario  que  se 


proporcionen  las  normales  para  cada  vértice.  Por  ejemplo,  el  listado 


5.5 


define  el 


modelo  de  un  cubo  donde  para  cada  vértice  se  proporcionan  la  posición  y  la  nor¬ 
mal.  Observa  que  en  el  modelo  del  cubo,  la  normal  de  un  vértice  es  diferente  según 
la  cara  que  lo  utilice.  Por  este  motivo,  la  descripción  del  cubo  ha  pasado  de  8  a  24 
vértices. 

Listado  5.5:  Modelo  de  un  cubo  con  la  normal  definida  para  cada  vértice 


var  exampleCube  = 


vértices  " 


[-0.5, 

-0.5, 

0.5  , 

0. 

o  , 

0 

.0  , 

1. 

,0  , 

0.5, 

-0.5, 

0.5  , 

0. 

o , 

0 

.0  , 

1, 

o , 

0.5  , 

0.5  , 

0.5  , 

0. 

o , 

0 

.0  , 

1. 

o , 

-0.5, 

0.5  , 

0.5  , 

0. 

o  , 

0 

.0  , 

1. 

,0  , 

0.5, 

-0.5, 

0.5  , 

1. 

o , 

0 

.0  , 

0. 

o , 

0.5,- 

-0.5, 

-0.5, 

1. 

o , 

0 

.0  , 

0. 

o , 

0.5  , 

0.5, 

-0.5, 

1. 

o  , 

0 

.0  , 

0. 

.0  , 

0.5  , 

0.5  , 

0.5  , 

1. 

o , 

0 

.0  , 

0. 

o , 

0.5,- 

-0.5, 

-0.5, 

0. 

o , 

0. 

o, 

-1 

.0, 

-0.5, 

-0.5, 

-0.5, 

0. 

o  , 

0. 

,0, 

-1 

.0, 

-0.5, 

0.5, 

-0.5, 

0. 

o , 

0. 

o, 

-1 

.0, 

0.5  , 

0.5, 

-0.5, 

0. 

o , 

0. 

o, 

-1 

.0, 

-0.5, 

-0.5, 

-0.5, 

-1 

•  0, 

0 

.0  , 

0. 

.0  , 

-0.5, 

-0.5, 

0.5, 

-1 

.0, 

0 

.0  , 

0. 

o , 

-0.5, 

0.5  , 

0.5, 

-1 

.0, 

0 

.0  , 

0. 

o , 

-0.5, 

0.5, 

-0.5, 

-1 

.0, 

0 

.0  , 

0. 

,0  , 

-0.5, 

0.5  , 

0.5  , 

0. 

o , 

1 

.0  , 

0. 

o , 

0.5  , 

0.5  , 

0.5  , 

0. 

o , 

1 

.0  , 

0. 

o , 

0.5  , 

0.5, 

-0.5, 

0. 

o  , 

1 

.0  , 

0. 

.0  , 

-0.5, 

0.5, 

-0.5, 

0. 

o , 

1 

.0  , 

0. 

o , 
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-0.5, -0.5, 

-0.5, 

0.0, 

-1.0, 

0.0  , 

0.5, -0.5, 

-0.5, 

0.0, 

-1.0, 

0.0  , 

0.5, -0.5, 

0.5  , 

0.0, 

-1.0, 

0.0  , 

-0.5, -0.5, 

0.5  , 

0.0, 

-1.0, 

0.0] 

" in dices 

}; 

La  función  initShaders  es  un  buen  sitio  donde  obtener  la  referencia  al  nuevo 
atributo  y  habilitarlo,  así  como  para  obtener  la  referencia  a  la  matriz  de  transfor¬ 
mación  de  la  normal  (véase  listado [5T6]). 

Listado  5.6:  Obtención  de  referencias  para  el  uso  de  las  normales 

program  .  vertexNormal Attribute  = 

gl  .  get  AttribLocation  (  program,  "VertexNormal"); 
program  .  normalMatrixIndex  = 

gl  .  getUniformLocation  (  program,  "  normalMatrix  " )  ; 
gl  .  enableVertexAttribArray( program  .  vertexNormalAttribute)  ; 

Por  supuesto,  la  matriz  de  la  normal  es  propia  de  cada  modelo,  ya  que  se  calcu¬ 
la  a  partir  de  la  matriz  modelo- vista  y  se  obtiene,  como  se  explicó  en  el  capítulo  3, 
mediante  la  traspuesta  de  su  inversa.  Como  esta  operación  hay  que  realizarla  para 
cada  modelo,  es  conveniente  crear  una  función  específica  y  llamarla  antes  de  orde¬ 
nar  su  dibujado  para  obtener  así  la  matriz  de  la  normal  del  shader ,  tal  y  como  se 
muestra  en  el  listado  15771 

Listado  5.7:  Funciones  para  el  cálculo  y  la  inicialización  de  la  matriz  de  la  normal  en  el  shader  a 
partir  de  la  matriz  modelo-vista 

function  getNormalMatrix  ( modelViewMatrix  )  { 
var  normalMatrix  =  mat3 .  create  ()  ; 

mat3  .  normalFromMat4  (  normalMatrix  ,  modelViewMatrix); 
return  normalMatrix  ; 

i 

function  setShaderNormalMatrix  (  normalMatrix  )  { 

gl  .  uniformMatrix3fv  ( program  .  normalMatrixIndex  ,  false  , 
normalMatrix )  ; 

} 

Por  último,  a  la  hora  de  dibujar  el  modelo,  hay  que  especificar  cómo  se  encuen¬ 
tra  almacenado  dicho  atributo  en  el  vector  de  vértices  (véase  listado  [578]) . 


[  0,  1,  2,  0,  2,  3,  4,  5,  6,  4,  6,  7, 
8,  9,10,  8,10,11,12,13,14,12,14,15, 
16,17,18 ,16,18 ,19,20,21  ,22,20,22,23] 
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Listado  5.8:  Nueva  función  de  dibujo  que  incluye  dos  atributos:  posición  y  normal 
function  drawSolid  ( model )  { 

gl  .  bindB uffer  (  g  1  .  ARRAY_BUFFER ,  model .  idB  ufferVertic e s  )  ; 
gl  .  vertex  AttribPointer  ( program  .  vertexPo  sition  Attribute  ,  3, 

g  1  .  FLO  AT ,  false,  2*3*4,  0); 

gl  .  vertex  AttribPointer  ( program  .  vertexNormal  Attribute  ,  3, 

g  1  .  FLO  AT ,  false,  2*3*4,  3*4); 

gl  .  bindB  uffer  (gl  .  ELEMENT_ARRAY_BUFFER , 

model .  idBufferlndices  )  ; 

gl  .  drawElements  (  g  1  . TRIANGLES ,  model .  indices  .  length  , 
g  1  .  UNSIGNED_SHORT ,  0 )  ; 

} 


5.4.2.  Materiales 


Para  especificar  un  material  es  necesario,  en  primer  lugar,  obtener  las  referen¬ 
cias  de  las  variables  que  van  a  contener  el  valor  del  material  en  el  shader.  Examina 


el  listado  pTI]  para  recordarlas.  El  listado  [579]  muestra  el  código  correspondiente  a 
este  paso.  Un  buen  sitio  para  colocarlo  sería  en  la  función  initShaders. 


Listado  5.9:  Obtención  de  las  referencias  a  las  variables  del  shader  que  contendrán  el  material 


program  .  Kalndex  =  gl  .  getUniformLocation  ( program 

program  .  Kdlndex  =  gl  .  getUniformLocation  ( program 

program  .  Kslndex  =  gl  .  getUniformLocation  ( program 

program  .  alphalndex  =  gl.  getUniformLocation  ( program 

"  Material  .  alpha  " )  ; 


'  Material  .  Ka" )  ; 
'  Material  . Kd" )  ; 
'  Material  .  Ks " )  ; 


En  segundo  lugar,  hay  que  especificar  el  material  para  cada  modelo  justo  antes 
de  ordenar  su  dibujado.  Para  esto,  es  buena  idea  definir  una  función  que  inicialice 
las  variables  del  shader  correspondientes  al  material.  El  listado 


5.10 


muestra  un 

ejemplo  del  material  Silver ,  una  función  para  asignar  valores  de  material  a  las 
variables  del  shader  así  como  un  ejemplo  de  cómo  dibujar  un  cubo  con  dicho 
material. 


Listado  5.10:  La  función  setShaderMaterial  recibe  un  material  como  parámetro  e  inicializa  las  va¬ 
riables  del  shader  correspondientes.  En  la  función  drawScene  se  establece  un  valor  de  material  antes 
de  dibujar  el  objeto 

var  Silver  =  { 

"  mat_ambient "  :  [  0.19225,  0.19225,  0.19225  ], 

"  mat_diffuse "  :  [  0.50754,  0.50754,  0.50754  ], 

"  mat_specular "  :  [  0.50827,  0.50827,  0.50827  ], 

"alpha"  :  [  51.2  ] 

! ; 
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function  setShaderMaterial  (  material )  { 


gl  .  uniform3fv  (program  .  Kalndex  , 
gl  .  uniform3fv( program  .  Kdlndex  , 
gl  .  uniform3fv  (program  .  Kslndex  , 
gl  .  uniformlf  (program  .  alphalndex  , 

! 


material  .  mat_ambient)  ; 
material  .  mat_diffuse)  ; 
material  .  mat_specular )  ; 
material  .  alpha )  ; 


function  drawScene  ()  { 


//  establece  un  material  y  dibuja  un  cubo 
setShaderMaterial  (Silver)  ; 
drawSolid  ( exampleCube )  ; 

} 


5.4.3.  Fuente  de  luz 


Respecto  a  la  fuente  de  luz,  por  una  parte  hay  que  obtener  las  referencias  a  las 
variables  del  shader  (véase  listado  |5.11|)  que  definen  los  parámetros  de  la  fuente 
de  luz,  y  que  de  manera  similar  al  material  podemos  colocar  en  la  función  initSha- 
ders.  Por  otra  parte,  hay  que  inicializar  las  variables  del  shader  antes  de  ordenar  el 
dibujado  del  primer  objeto  de  la  escena.  Es  interesante  agrupar  la  inicialización  en 
una  sola  función  (véase  listado  [5TT2]) . 


Listado  5.11:  Obtención  de  las  referencias  a  las  variables  del  shader  que  contendrán  los  valores  de 
la  fuente  de  luz 


program  .  Lalndex  = 

program  .  Ldlndex  = 

program  .  Lslndex  = 

program.  Po sition!ndex  = 


gl  .  getUniformLocation  ( program  , 
gl  .  getUniformLocation  ( program  , 
gl  .  getUniformLocation  ( program  , 
gl  .  getUniformLocation  ( program  , 
"  Light  .  Po sition  " )  ; 


Light . La" ) ; 
Light .Ld") ; 
Light . Ls " ) ; 


Listado  5.12:  La  función  setShaderLight  inicializa  las  variables  del  shader  correspondientes 


function  setShaderLight  ()  { 

gl  .  uniform3f  (program  .  Lalndex  , 

1.0  , 

1.0  , 

1.0)  ; 

gl  .  uniform3f  (program  .  Ldlndex  , 

1.0  , 

1.0  , 

1.0)  ; 

gl  .  uniform3f  (program  .  Lslndex  , 

1.0  , 

1.0  , 

1.0)  ; 

gl  .  uniform3f(  program  .Positionlndex  , 

} 

10.0, 

10.0, 

0.0)  ; 

Ejercicios  - 

►  5.3  Ejecuta  el  programa  c05/phongConSombreadoGouraud.html ,  que  implementa  el 
modelo  de  iluminación  de  Phong  y  el  modelo  de  sombreado  de  Gouraud.  Como  resulta¬ 
do  obtendrás  imágenes  similares  a  las  de  la  figura|5.13(b)|  Examina  el  shader  y  comprueba 
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que  los  fragmentos  de  código  comentados  en  esta  sección  se  incluyen  en  c05/iluminacion.js. 
Comprueba  también  cómo  el  fichero  c05/primitivasGN.js  contiene  las  normales  de  cada 
vértice  para  cada  una  de  las  primitivas  definidas. 

►  5.4  Implementa  el  modelo  de  sombreado  de  Phong  a  partir  del  mismo  programa  del 
ejercicio  anterior.  La  figura|5.13(c)  muestra  tres  ejemplos  de  resultados  obtenidos  utilizan¬ 
do  este  modelo  de  sombreado. 

►  5.5  A  partir  del  programa  c05/phongConSombreadoGouraud.html  realiza  los  cambios 
necesarios  para  implementar  el  modelo  de  sombreado  plano.  La  figura 
algunos  resultados  obtenidos  utilizando  este  modelo  de  sombreado. 


5.13(a) 


muestra 


(a)  Sombreado  Plano 


(b)  Sombreado  Gouraud 


(c)  Sombreado  Phong 

Figura  5.13:  Ejemplos  obtenidos  con  los  modelos  de  sombreado:  Plano,  Gouraud  y  Phong 
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5.5.  Iluminación  por  ambas  caras 


Cuando  la  escena  incorpora  modelos  abiertos,  es  posible  observar  los  polígonos 
que  se  encuentran  en  la  parte  trasera  de  los  objetos,  como,  por  ejemplo,  ocurre  en 
la  copa  de  la  figura  |5.14|  Para  una  correcta  visualización  es  necesario  utilizar  la 
normal  contraria  en  los  polígonos  que  forman  parte  de  la  cara  trasera.  Esto  es  una 


operación  muy  sencilla  en  WebGL  y  se  muestra  en  el  listado  5.13 


Listado  5.13:  Iluminación  en  ambas  caras,  modificación  en  el  shader  de  fragmentos 
if  (  gl_FrontFacing  ) 

fragmentColor  =  vec4(phong(  n,  L,  V),  1.0); 

else 

fragmentColor  =  vec4  ( phong(  —  n  ,  L,  V)  ,  1.0); 


Figura  5.14:  Ejemplo  de  modelo  en  el  que  hay  que  aplicar  iluminación  en  ambas  caras  para  una 
correcta  visualización 


Ejercicios 


►  5.6  Implementa  un  shader  que  te  permita  sombrear  objetos  por  ambas  caras.  Esto  es 
muy  útil  en  el  caso  de  que  los  objetos  sean  abiertos  como,  por  ejemplo,  ocurre  con  las  pri¬ 
mitivas  del  cilindro,  el  cono  o  el  plano.  El  listado|5.13  muestra  el  código  necesario.  Decide 
tú  mismo  dónde  ponerlo  (quizá  debas  también  eliminar  alguna  línea  en  tu  shader  actual). 
Recuerda  que  solo  verás  diferencias  si  alguna  de  las  primitivas  de  la  escena  es  abierta. 

►  5.7  Tratar  las  dos  caras  de  los  polígonos  te  permitiría  utilizar  un  tipo  de  material  di¬ 
ferente  para  cada  cara.  Por  ejemplo,  material  oro  para  las  caras  delanteras  y  material  plata 
para  las  traseras.  Comenta  las  modificaciones  que  tendrías  que  hacer  al  shader  del  listado 
5.1  para  conseguirlo. 


5.6.  Sombreado  cómic 

El  objetivo  es  simular  el  sombreado  típico  en  cómics.  Este  efecto  se  consigue 
haciendo  que  la  componente  difusa  del  color  de  un  fragmento  se  restrinja  a  solo  un 
número  determinado  de  posibles  valores.  La  función  toonShading  que  se  muestra 
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en  el  listado  |5.14|  realiza  esta  operación  para  cada  fragmento.  La  variable  levels 
determina  el  número  máximo  de  colores  distintos  (véase  figura [5T5]). 


Listado  5.14:  Iluminación  en  ambas  caras,  modificación  en  el  shader  de  fragmentos 
vec3  toonShading  (vec3  N,  vec3  L)  { 

vec3  ambient  =  Material. Ka  *  Light.La; 

float  NdotL  =  max(0.0,  dot  (N,L)); 

float  levels  =  3.0; 

float  scaleFactor  =  1.0  /  levels; 

vec3  diffuse  =  ceil(NdotL  *  levels)  *  scaleFactor  * 
(Light.Ld  *  Material  . Kd)  ; 

return  (ambient  +  diffuse); 

} 

void  main()  { 

vec3  n  =  normalize  (N)  ; 

vec3  L  =  normalize  (  Light  .  Po sition  —  ec); 
fragmentColor  =  vec4  ( toonShading  (n  ,L)  ,  1.0); 

i 


(a)  levels  =  3 


(b)  levels  =  5 


(c)  levels  =  10 


Figura  5.15:  Resultado  de  la  función  toonShading  con  diferentes  valores  de  la  variable  levels 
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Ejercicios 


►  5.8  Añade  la  función  toonShading  a  tu  shader  de  fragmentos  y  haz  que  se  llame  a  esta 
en  lugar  de  a  la  función  phong.  Observa  que  la  componente  especular  se  ha  eliminado  de 
la  ecuación,  por  lo  que  la  función  toonShading  solo  necesita  los  vectores  N  y  L. 

►  5.9  Para  complementar  el  shader  de  sombreado  cómic,  sería  muy  interesante  reforzar 
también  los  bordes  del  objeto  dibujado  utilizando  el  color  negro.  Dirígete  a  la  bibliografía 
y  encuentra  técnicas  que  te  permitan  conseguir  este  segundo  efecto  utilizando  shaders. 


5.7.  Niebla 

El  efecto  de  niebla  se  consigue  mezclando  el  color  de  cada  fragmento  con  el 
color  de  la  niebla.  A  mayor  distancia  de  un  fragmento  respecto  a  la  cámara,  mayor 
peso  tiene  el  color  de  la  niebla  y  al  contrario,  a  menor  distancia,  mayor  peso  tiene 
el  color  del  fragmento. 

En  primer  lugar  hay  que  obtener  el  color  del  fragmento  y  después,  a  modo 
de  posproceso,  se  mezcla  con  el  color  de  la  niebla  dependiendo  de  la  distancia  a 
la  cámara.  Para  implementar  este  efecto  se  definen  tres  variables:  distancia  míni¬ 
ma,  distancia  máxima  y  color  de  la  niebla.  Así,  dado  un  fragmento,  tenemos  tres 
posibilidades: 

■  Si  el  fragmento  está  a  una  distancia  menor  que  la  distancia  mínima,  no  se  ve 
afectado  por  la  niebla,  el  color  definitivo  es  el  color  del  fragmento. 

■  Si  el  fragmento  está  a  una  distancia  mayor  que  la  máxima,  el  color  definitivo 
es  el  color  de  la  niebla  (es  importante  que  el  color  de  fondo  coincida  con  el 
de  la  niebla). 

■  Si  el  fragmento  está  a  una  distancia  entre  la  mínima  y  la  máxima,  su  color 
definitivo  depende  del  color  del  fragmento  y  del  de  la  niebla.  Esta  variación 
puede  ser  lineal  con  la  distancia,  pero  suele  producir  mucho  mejor  resultado 
utilizar  una  función  exponencial. 

El  listado|5T5lmuestra  la  estructura  FogData  y  el  cálculo  del  valor  de  niebla  de 
manera  lineal  y,  con  comentarios,  de  manera  exponencial.  La  figura  [5716]  muestra 
algunos  resultados. 


Listado  5.15:  Shader  de  niebla 

struct  FogData  { 

float  maxDist; 
float  minDist ; 
vec3  color ; 

); 

FogData  Fog ; 
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void  main()  { 


Fog  .  minDist  =  10.0; 

Fog.maxDist  =  20.0; 

Fog. color  =  vec3(0.15,  0.15,  0.15); 
vec3  n  =  normalize  (N)  ; 

vec3  L  =  normalize  (  Light  .  Po sition  —  ec); 
vec3  V  =  normalize(— ec  )  ; 

float  dist  =  abs  (ec.z); 

//  lineal 

loat  fogFactor  =  (Fog.maxDist  —  dist)  / 

(Fog.maxDist  —  Fog  .  minDist )  ; 


//  exponencial 

//  float  fogFactor  =  exp(—pow  ( dist  ,  2.0)); 

fogFactor  =  clamp  (fogFactor,  0.0,  1.0); 

vec3  phongColor  =  phong (n ,L,V) ; 

vec3  myColor  =  mix  (Fog.  color,  phongColor,  fogFactor); 
fragmentColor  =  vec4  ( myColor  ,  1.0); 

i 


Figura  5.16:  Resultados  obtenidos  utilizando  el  shader  de  niebla 


Ejercicios 


►  5.10  Implementa  un  shader  que  simule  el  efecto  de  niebla  mezclando  el  color  de  cada 
fragmento  con  el  color  de  la  niebla  dependiendo  de  la  distancia  del  fragmento  a  la  cámara 
(es  importante  que  el  color  de  fondo  coincida  con  el  color  de  la  niebla).  Utiliza  el  código 
del  listado : 


5.15 


►  5.11  Busca  la  diferencia  visual  que  produce  la  variación  de  la  niebla  si  se  calcula  de 
manera  lineal  con  la  distancia  o  si  se  realiza  de  manera  exponencial,  ¿cuál  te  ha  gustado 
más? 
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Cuestiones 


►  5.1  ¿En  qué  shader  se  declara  el  atributo  de  la  normal,  vértices  o  fragmentos?  ¿Por 
qué? 

►  5.2  Respecto  a  la  matriz  de  transformación  de  la  normal,  ¿cuál  de  las  transformacio¬ 
nes  básicas  que  conoces  nunca  está  incluida  en  dicha  matriz:  traslación,  giro  o  escalado? 

►  5.3  ¿Por  qué  la  matriz  de  transformación  de  la  normal  se  suele  obtener  a  partir  de  la 
matriz  modelo- vista  y  no  únicamente  a  partir  de  la  matriz  de  transformación  del  modelo? 

►  5.4  ¿Qué  crees  que  pasaría  con  una  normal  en  el  caso  de  que  la  matriz  de  transfor¬ 
mación  del  modelo  contuviese  una  operación  de  escalado  en  el  que  uno  de  sus  factores  de 
escala  estuviese  a  cero? 

►  5.5  Hemos  organizado  los  atributos  de  un  vértice  de  tal  forma  que  en  primer  lugar 
figura  la  posición  y  después  la  normal.  ¿Crees  que  podríamos  hacerlo  al  revés,  es  decir, 
primero  la  normal  y  después  la  posición? 

►  5.6  ¿Qué  representa  la  Kd  para  el  objeto?  ¿Y  la  KS1  ¿Podrías  conseguir  que  una  luz 
blanca  ilumine  una  esfera  blanca  y  que  el  brillo  observado  se  aprecie  de  color  azúl? 

►  5.7  ¿A  qué  componentes  del  modelo  del  modelo  de  iluminación  de  Phong  afecta  el 
factor  de  atenuación  de  la  luz?,  ¿cómo  lo  aplicarías  en  la  función  phong? 

►  5.8  ¿Qué  es  la  variable  ec  que  aparece  en  el  shader  de  vértices  que  realiza  un  som¬ 
breado  de  Gouraud?  ¿Y  el  vector  V?  ¿Sabrías  dibujar  un  boceto  donde  se  muestre  lo  que 
ambas  variables  representan? 

►  5.9  Imagina  que  la  fuente  de  luz  está  colocada  en  un  punto  fijo  de  la  escena  (como 
una  lámpara,  por  ejemplo),  y  que  la  variable  Lp  contiene  dicha  posición,  ¿qué  tendrías  que 
hacer  para  obtener  la  correcta  posición  de  la  luz  que  te  permite  seguir  utilizando  el  shader 
del  listado l53l? 

►  5.10  Explica  las  diferencias,  ventajas  e  inconvenientes,  que  hay  entre  los  tres  métodos 
de  sombreado:  Plano,  Gouraud  y  Phong. 

►  5.11  En  la  implementación  del  modelo  de  sombreado  de  Phong,  ¿en  qué  shader  se 
calcula  el  vector  V  ? 

►  5.12  Si  utilizas  el  modelo  de  iluminación  de  Phong  con  una  fuente  de  luz  direccional, 
¿es  cierto  que  al  ser  el  vector  L  constante  para  toda  la  escena  también  lo  será  el  vector  de 
reflexión  R1 

►  5.13  En  el  modelo  de  iluminación  de  Phong,  ¿qué  significa  que  el  producto  escalar 
entre  los  vectores  N  y  L  sea  negativo? 

►  5.14  Si  M  es  la  matriz  modelo,  C  es  la  de  la  cámara,  P  la  de  proyección,  vp  es  el 
atributo  de  posición  del  vértice,  y  Lp  es  la  posición  de  la  fuente  de  luz,  escribe  el  fragmento 
de  código  de  un  shader  que  calcula  los  vectores  L  y  V  para  utilizarlos  en  el  modelo  de 
iluminación  de  Phong.  Asume  vp  y  Lp  de  tipo  vec3. 

►  5.15  En  el  modelo  de  iluminación  de  Phong,  explica  cómo  se  modela  la  reflexión  es¬ 
pecular  propia  de  superficies  brillantes  o  muy  pulidas.  Escribe  el  código  GLSL  que  permite 
calcularla  para  un  vértice  del  cual  conoces  su  posición  y  normal,  y  también  conoces  la 
posición  de  la  fuente  de  luz. 

►  5.16  Según  el  modelo  de  iluminación  de  Phong,  ¿qué  información  necesitas  para  poder 
calcular  el  color  de  un  punto  debido  a  la  reflexión  difusa?  Escribe  la  expresión  que  te 
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permite  obtenerlo  para  una  fuente  de  luz  posicional.  ¿Qué  diferencias  hay  si  la  fuente  de 
luz  fuese  direccional? 

►  5.17  En  la  implementación  del  modelo  de  sombreado  de  Gouraud,  ¿qué  información 
ha  de  interpolar  la  GPU? 

►  5.18  Tu  escena  se  compone  únicamente  de  un  cuadrado  y  utilizas  el  modelo  de  ilu¬ 
minación  de  Phong.  Compara  estas  dos  posibles  situaciones:  a)  utilizar  una  fuente  de  luz 
posicional  y  sombreado  plano;  b)  utilizar  una  fuente  de  luz  direccional  y  sombreado  de 
Gouraud.  ¿Crees  que  en  ambos  casos  se  obtendrá  un  efecto  de  sombreado  similar  o  si  por 
el  contrario  habrá  diferencias  evidentes? 

►  5.19  Explica  la  diferencia  entre  los  conceptos  modelo  de  iluminación  de  Phong  y  mo¬ 
delo  de  sombreado  de  Phong. 

►  5.20  Dado  una  luz  de  tipo  foco,  ¿qué  vectores  y  cómo  se  utilizan  para  saber  si  un 
fragmento  está  dentro  del  cono  de  luz? 

►  5.21  ¿Qué  tipo  de  sombreado  (Plano,  Gouraud  o  Phong)  sería  más  conveniente  utilizar 
en  el  caso  de  que  tu  escena  mostrara  objetos  de  superficie  plana  y  de  material  especular 
(como  un  mesa  de  mármol  muy  pulida,  por  ejemplo)? 
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En  el  capítulo  anterior  se  mostró  cómo  un  modelo  de  iluminación  aumentaba 
el  realismo  visual  de  las  imágenes  generadas  por  computador.  Ahora,  el  objetivo 
es  mejorar  un  poco  más  dicho  realismo  visual  mediante  el  uso  de  texturas,  es  decir, 
imágenes  que  a  modo  de  mapas  de  color  se  utilizarán  para  calcular  el  color  definiti¬ 
vo  de  los  píxeles  (observa  las  figuras [67T|y  |6.2[).  El  uso  de  texturas  para  incrementar 
el  realismo  visual  es  muy  frecuente,  por  lo  que  el  número  de  técnicas  en  la  literatura 
es  también  muy  elevado.  En  concreto,  en  este  capítulo  se  van  a  revisar  técnicas  que 
resultan  especialmente  idóneas  para  gráficos  en  tiempo  real. 


6.1.  Coordenadas  de  textura 

Las  coordenadas  de  textura  son  necesarias  para  establecer  cómo  se  ha  de  pegar 
la  textura  sobre  la  superficie  del  modelo.  Por  ejemplo,  la  figura [63]  muestra  cómo 
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Figura  6.1:  Resultados  obtenidos  al  aplicar  diferentes  texturas  2D  sobre  el  mismo  objeto  3D 


Figura  6.2:  Ejemplo  de  aplicar  una  textura  2D  diferente  a  la  misma  escena 


una  misma  textura  se  ha  aplicado  sobre  el  mismo  modelo  produciendo  resultados 
distintos.  La  diferencia  reside  únicamente  en  las  coordenadas  de  textura  que  se  han 
utilizado. 

Las  coordenadas  de  textura  se  suministran  como  un  nuevo  atributo  del  vértice, 
aunque  lo  más  habitual  es  que  sea  en  el  procesador  de  fragmentos  donde  se  accede 
a  la  textura  por  lo  que  será  necesario  que  la  GPU  las  interpole  y  así  obtenerlas  para 
cada  fragmento.  El  rango  de  coordenadas  válido  en  el  espacio  de  la  textura  es  [0, 1], 
siendo  este  rango  independiente  del  tamaño  en  píxeles  de  la  textura  (véanse  figura 
64]). 


InFarmeáficca 

Cirtáñcca 


Figura  6.3:  Resultados  obtenidos  utilizando  diferentes  coordenadas  de  textura 


El  listado 


6.1 


muestra  los  cambios  necesarios.  El  shader  de  vértices  recibe  el 


nuevo  atributo  que  contiene  las  coordenadas  de  textura  y  las  asigna  a  una  variable 
de  tipo  out  para  que  cada  fragmento  reciba  sus  coordenadas  de  textura  interpoladas. 
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Espacio  de  la  textura 


Espacio  del  objeto 


0,1 


> 


0,0 


1,0  s 


Figura  6.4:  En  el  espacio  de  la  textura,  el  rango  de  coordenadas  válido  es  [0, 1].  En  el  espacio  del 
objeto,  cada  fragmento  recibe  las  coordenadas  de  textura  interpoladas 

El  shader  de  fragmentos  utiliza  la  función  texture  para,  a  partir  de  las  coordenadas  y 
una  textura,  obtener  un  valor  de  color.  La  textura  está  declarada  de  tipo  sampler2D , 
que  es  el  tipo  que  GLSL  establece  para  una  textura  2D.  La  figura  [675]  muestra  dos 
resultados  de  la  aplicación  de  textura. 


Listado  6. 1 :  Cambios  necesarios  para  que  un  shader  utilice  una  textura  2D 


//  Shader  de  vértices 

in  vec2  VertexTexcoords  ;  //  nuevo  atributo 

out  vec2  texCoords  ; 

void  main()  { 

//  se  asignan  las  coordenadas  de  textura  del  vértice 
//  a  la  variable  texCoords 
texCoords  =  VertexTexcoords; 


//  Shader  de  fragmentos 


uniform  sampler2D  myTexture ; 
in  vec2  texCoords  ; 


//  la  textura 

//  coords  de  textura  interpoladas 


void  main()  { 

//  acceso  a  la  textura  para  obtener  un  valor  de  color  RGBA 
fragmentColor  =  texture  ( myTexture  ,  texCoords); 


Por  supuesto,  desde  el  shader  de  fragmentos  es  posible  acceder  a  diferentes  tex¬ 
turas  y  realizar  cualquier  combinación  con  los  valores  obtenidos  para  determinar 
el  color  definitivo.  La  figura [óTó] muestra  un  ejemplo  donde  se  han  combinado  dos 
texturas  y  el  listado|63|muestra  los  cambios  necesarios  en  el  shader  de  fragmentos 
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Figura  6.5:  Ejemplos  de  aplicación  de  textura  2D.  En  estos  casos  el  color  definitivo  de  un  fragmento 
se  ha  obtenido  a  partir  de  la  textura  y  del  modelo  de  iluminación  de  Phong 


para  acceder  a  varias  texturas  (el  shader  de  vértices  no  cambia).  Observa,  por  ejem¬ 
plo,  que  se  utilizan  las  mismas  coordenadas  de  textura  para  acceder  a  las  diferentes 
texturas.  Observa  también  que  se  ha  utilizado  la  operación  de  multiplicación  para 
combinar  los  colores  obtenidos  de  cada  textura,  pero  se  podría  haber  usado  cual¬ 
quier  otra  operación. 


Figura  6.6:  Resultado  de  combinar  dos  texturas 


Listado  6.2:  Cambios  en  el  shader  de  fragmentos  para  utilizar  varias  texturas  2D 


//  Shader  de  fragmentos 

uniform  sampler2D  myTexturel  ,  myTexture2 ;  //  las  texturas 
in  vec2  texCoords  ;  //  coords  de  textura  interpoladas 

void  main()  { 


//  acceso  a  las 
fragmentColor  = 


texturas  para  obtener  los  valores  de  color  RGBA 
texture  ( myTexturel  ,  texCoords)  * 
texture  ( myTexture2  ,  texCoords); 
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6.1.1.  Repetición  de  la  textura 

En  el  caso  de  proporcionar  valores  mayores  que  1  en  las  coordenadas  de  tex¬ 
tura,  es  posible  gobernar  el  resultado  de  la  visualización  utilizando  la  función 
gl.texParameter.  Tres  son  los  modos  posibles,  y  pueden  combinarse  con  valores 
distintos  en  cada  dirección  S  y  T  (véanse  ejes  en  la  figura [6~4]).  Son  estos: 

■  Repite  la  textura  (véase  figura  [677]) 

•  gl . texParameteri (gl . TEXTURE_2D , 
gl . TEXTURE_WRAP_ [ S | T ]  ,  gl . REPEAT )  ; 

■  Extiende  el  borde  de  la  textura  (véase  figura  [678]) 

•  gl .texParameteri (gl . TEXTURE_2D, 

gl . TEXTURE_WRAP_ [ S  | T  ]  ,  gl . CLAMP_TO_EDGE )  ; 

■  Repite  la  textura  de  manera  simétrica  (véase  figura|6.9|) 

•  gl .texParameteri (gl . TEXTURE_2D, 

gl . TEXTURE_WRAP_ [ S | T ]  ,  gl . MIRRORED_REPEAT )  ; 


■  £V 


lxl 


2x2 


v.v  iKHHDBn  m  vi  "ii  i  ni* 1 1 1 

3x3  3x1 


Figura  6.7:  Ejemplos  de  repetición  de  textura 


Figura  6.8:  Resultados  de  extensión  del  borde  de  la  textura 
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Figura  6.9:  Repetición  de  la  textura  de  manera  simétrica  (imagen  de  la  izquierda)  y  repetición  normal 
como  la  de  la  figura [( 


6.7 


(imagen  de  la  derecha) 


Ejercicios  - 

►  6.1  Viendo  la  imagen  izquierda  de  la  figura|6.8[  ¿cuáles  crees  que  son  las  coordenadas 
de  textura  que  se  han  especificado  para  cada  uno  de  los  vértices  del  polígono?,  ¿y  en  el  caso 
de  la  imagen  izquierda  de  la  figura|6.9|? 

►  6.2  Determina  las  coordenadas  de  textura  de  cada  uno  de  los  vértices  que  se  encuen¬ 
tran  numerados  en  la  siguiente  figura  de  manera  que  tras  aplicar  la  textura  de  cesped  se 
obtiene  el  siguiente  resultado. 


Mal  (a  poligonal  Resultado 


0  3 


►  6.3  Determina  las  coordenadas  de  textura  de  cada  uno  de  los  vértices  que  se  encuen¬ 
tran  numerados  en  la  siguiente  figura.  Para  averiguarlas,  ten  en  cuenta  el  resultado  que 
también  se  muestra  en  la  figura.  En  este  caso,  el  ancho  y  alto  del  trozo  de  textura  utilizado 
son  de  un  cuarto  del  ancho  y  alto  total  de  la  textura  respectivamente. 

2 


+ 


0 


Malla  poligonal  Resultado 
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►  6.4  Determina  las  coordenadas  de  textura  de  los  siguientes  vértices  (enumerados  como 
a,  b,  c,  d,  e,  f,  g,  h,  i,  j,  k,  1)  de  manera  que  la  textura  quede  como  se  muestra  en  la  siguiente 
figura. 


►  6.5  Trabajando  con  coordenadas  de  textura  mayores  que  uno  y  si  se  extiende  el  color 
del  borde  de  la  textura,  ¿en  qué  coordenadas  de  textura  se  convertirán  las  coordenadas 
(0.7, 2.3)? 

►  6.6  Trabajando  con  coordenadas  de  textura  mayores  a  uno  y  si  se  repite  la  textura,  ¿en 
qué  coordenadas  de  textura  se  transforman  las  coordenadas  (3.5,  2.7)?  ¿y  si  las  coordena¬ 
das  son  (0.1,  7.7)? 

►  6.7  Utilizando  la  textura  que  se  muestra  en  la  siguiente  figura  y  aplicando  el  modo 
de  repetición  basado  en  espejo  de  OpenGL  (MIRRORED_REPEAT),  dibuja  como  quedaría 
la  textura  sobre  cada  uno  de  los  siguientes  objetos  teniendo  en  cuenta  las  coordenadas  de 
textura  que  se  especifican  para  cada  uno  de  ellos. 

Textura  (4,3)  Objeto  (5,3)  (4,4)  Objeto  (6,4) 


(4.2) 


(5,2)  (4,2) 


(6,2) 


►  6.8  Si  para  un  fragmento  sus  coordenadas  de  textura  son  (1.3, 0.7),  obtén  las  respec¬ 
tivas  coordenadas  de  textura  en  el  espacio  de  la  textura  para  cada  uno  de  los  métodos  de 
repetición  soportados  en  WebGL. 


6.2.  Leyendo  téxeles 

Un  téxel  es  un  píxel  de  la  textura.  En  los  orígenes  de  OpenGL,  el  acceso  a  los 
téxeles  de  una  textura  solo  era  posible  realizarlo  desde  el  shader  de  fragmentos. 
Sin  embargo,  los  procesadores  gráficos  que  aparecieron  en  el  2008  eliminaban  esa 
limitación  y  era  posible  acceder  a  una  textura  también  desde  el  shader  de  vértices. 
En  cualquier  caso,  debido  a  que  rara  vez  el  tamaño  de  un  fragmento  se  corresponde 
con  el  de  un  téxel  de  la  textura,  el  acceso  a  la  textura  conlleva  dos  problemas: 

■  Magnificación:  cuando  a  un  fragmento  le  corresponde  un  trocito  de  un  téxel 
de  la  textura. 

■  Minimización:  cuando  a  un  fragmento  le  corresponden  varios  téxeles  de  la 
textura. 
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6.2.1.  Magnificación 

Para  tratar  este  problema,  WebGL  proporciona  dos  tipos  de  filtrado: 

■  Filtro  caja:  se  utiliza  el  téxel  más  cercano.  Por  desgracia,  aunque  es  muy 
rápido,  produce  el  típico  efecto  de  pixelado  que  obtenemos  al  ampliar  una 
imagen  (véase  figura|6.10|). 

•  gl . texParameteri (gl . TEXTURE_2D, 

gl . TEXTURE_MAG_FILTER,  gl . NEAREST ) ; 

■  Filtro  bilineal:  utiliza  cuatro  téxeles  cuyos  valores  se  interpolan  linealmente. 
Este  filtro  produce  un  efecto  de  borrosidad  (véase  figura|6.lTT). 

•  gl . texParameteri (gl . TEXTURE_2D, 

gl . T E  X T  URE_MAG_F I L  T E  R ,  gl . LINEAR)  ; 


Figura  6.10:  Filtro  caja  de  WebGL,  devuelve  el  valor  del  téxel  más  cercano  y  produce  el  efecto  de 
pixelado 


Figura  6.11:  Filtro  bilineal  de  WebGL,  devuelve  la  interpolación  lineal  de  cuatro  téxeles  y  produce 
el  efecto  de  borrosidad 


6.2.2.  Minimización 

WebGL  proporciona  un  método  más  de  filtrado  para  el  problema  de  la  minimi¬ 
zación,  además  del  filtro  caja  y  del  bilineal  comentados  en  la  sección  anterior.  Se 
denomina  mipmapping  y  consiste  en  proporcionar,  además  de  la  textura  original, 
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un  conjunto  de  versiones  más  pequeñas  de  la  textura,  cada  una  de  ellas  un  cuarto 
más  pequeña  que  la  anterior.  A  este  conjunto  de  texturas  de  distintos  tamaños  se  le 
llama  pirámide  de  texturas. 

■  Filtro  caja  y  bilineal,  respectivamente: 

•  gl . texParameteri (gl . TEXTURE_2D , 

gl . TEXTURE_MIN_FILTER,  gl . NEAREST) ; 

•  gl .texParameteri (gl . TEXTURE_2D, 

gl . TEXTURE_MIN_FILTER,  gl . LINEAR) ; 

■  Mipmapping :  en  tiempo  de  ejecución,  la  GPU  selecciona  la  textura  cuyo  ta¬ 
maño  se  acerca  más  al  de  la  textura  en  la  pantalla  (véase  figura|6.12|).  WebGL 
puede  generar  la  pirámide  de  texturas  de  manera  automática: 

•  gl . generateMipmap (gl . TEXTURE_2D) ; 

Utilizando  este  método  de  filtrado,  WebGL  también  puede  realizar  un  filtra¬ 
do  trilineal  seleccionando  dos  texturas,  muestreando  cada  una  utilizando  un 
filtro  bilineal,  e  interpolando  los  dos  valores  obtenidos: 

•  gl . texParameteri (gl . TEXTURE_2D , 

gl . TEXTURE_MIN_FILTER,  gl . LINEAR_MIPMAP_LINEAR) ; 


Figura  6.12:  Ejemplo  de  escena  con  Mipmapping  (izquierda)  y  solo  filtro  bilineal  (derecha). 


6.3.  Texturas  en  WebGL 

Para  poder  aplicar  una  textura  en  WebGL  es  necesario: 

1.  crear  un  objeto  textura  y  establecer  todos  sus  datos,  y 

2.  asignarlo  a  una  unidad  de  textura. 
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En  WebGL  las  texturas  se  representan  mediante  objetos  con  nombre.  El  nom¬ 
bre  no  es  más  que  un  entero  sin  signo  donde  el  valor  0  está  reservado.  Para  crear 
un  objeto  textura  es  necesario  obtener  en  primer  lugar  un  nombre  que  no  se  esté 
utilizando.  Esta  solicitud  se  realiza  con  la  orden  gl.createTexture.  Se  han  de  soli¬ 
citar  tantos  nombres  como  objetos  textura  necesitemos,  teniendo  en  cuenta  que  un 
objeto  textura  almacena  una  única  textura. 

Una  vez  creado  este  objeto,  hay  que  especificar  tanto  la  textura  (la  imagen 
2D  en  nuestro  caso)  como  los  diferentes  parámetros  de  repetición  y  filtrado.  Para 
especificar  la  textura  se  utiliza  la  siguiente  orden: 

■  gl .  texImage2D  (GLenum  objetivo,  GLint  nivel, 

GLenum  f  or  mato  Inter  no ,  GLsizei  ancho, 

GLsizei  alto,  GLint  borde ,  GLenum  formato , 

GLenum  tipo ,  TexImageSource  datos)  ; 

donde  el  objetivo  será  gl.TEXTURE_2D.  El  parámetro  formatolnterno  se  utiliza 
para  indicar  cuáles  de  las  componentes  R,  G,  B  y  A  se  emplean  como  téxeles  de 
la  imagen.  Los  parámetros  formato ,  tipo  y  datos  especifican,  respectivamente,  el 
formato  de  los  datos  de  la  imagen,  el  tipo  de  esos  datos  y  una  referencia  a  los  datos 
de  la  imagen.  El  parámetro  nivel  se  utiliza  solo  en  el  caso  de  usar  diferentes  resolu¬ 
ciones  de  la  textura,  siendo  0  en  cualquier  otro  caso.  Y  por  último,  los  parámetros 
ancho ,  alto  y  borde  se  refieren  al  ancho  y  alto  de  la  textura,  y  al  tamaño  del  borde 
que  ha  de  ser  cero.  Para  que  esta  orden  y  las  que  permiten  definir  los  parámetros  de 
repetición  y  filtrado  tengan  efecto  sobre  la  textura,  hace  falta  usar  gl.bindTexture 
sobre  la  textura  creada  con  gl.createTexture.  El  listado [63] muestra  un  ejemplo  que 
incluye  la  creación  de  la  textura  y  el  establecimiento  de  sus  datos  y  propiedades. 


Listado  6.3:  Creación  de  una  textura  en  WebGL  2.0 

//  Crea  un  objeto  textura 

texture  =  gl . ere ateTexture () ; 

gl  .  bindTexture(gl  .  TEXTURE_2D ,  texture); 

//  E sp e cific a  la  textura  RGB 

gl  .  texImage2D  (  g  1  . TEXTURE_2D ,  0,  gl  .RGB,  image  .  width  , 
image  .  height  ,  0,  gl  .RGB,  gl  .  UNSIGNED_B  YTE ,  image); 

//  Repite  la  textura  tanto  en  s  como  en  t 

gl  .  texParameteri(gl  .TEXTURE_2D,  gl  . TEXTURE_WRAP_S ,  gl  .REPEAT)  ; 
gl  .  texParameteri(gl  .TEXTURE_2D,  gl  .TEXTURE_WRAP_T,  gl  .REPEAT)  ; 

//  Filtrado 

gl  .  texParameteri  (  gl  . TEXTURE_2D ,  gl  . TEXTURE_MIN_FILTER , 
gl  . LINEAR JVUPMAP_LINEAR)  ; 

gl  .  texParameteri  (  gl  . TEXTURE_2D ,  gl  . TEXTURE_M AG_FILTER , 
gl  .LINEAR)  ; 

gl  .  generateMipmap  (  gl  .TEXTURE_2D)  ; 
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Ya  solo  queda  asignar  el  objeto  textura  a  una  unidad  de  textura.  Estas  unidades 
son  finitas  y  su  número  depende  del  hardware.  El  consorcio  ARB  fija  que  al  menos 
16  unidades  de  textura  deben  existir  en  WebGL  2.0,  pero  es  posible  que  nues¬ 
tro  procesador  gráfico  disponga  de  más.  La  orden  gl.activeTexture  especifica  el 
selector  de  unidad  de  textura  activa.  Así,  por  ejemplo,  la  orden: 


■  gl . act iveTexture (gl . TEXTURE3 ) ; 


selecciona  la  unidad  de  textura  3.  A  continuación,  hay  que  especificar  el  objeto  tex¬ 
tura  a  utilizar  por  dicha  unidad  con  la  orden  gl.bindTexture.  A  cada  unidad  de  tex¬ 
tura  solo  se  le  puede  asignar  un  objeto  textura  pero,  durante  la  ejecución,  podemos 
cambiar  tantas  veces  como  queramos  el  objeto  textura  asignado  a  una  determinada 
unidad.  El  listado  < 


6.4 


muestra  un  ejemplo  que  incluye  ambas  órdenes. 


Listado  6.4:  Asignación  de  un  objeto  textura  a  una  unidad  de  textura 

//  Selecciona  la  unidad  de  textura  0 
gl  .  activeTexture(gl  . TEXTUREO)  ; 

//  Asocia  un  objeto  textura  a  la  unidad  seleccionada 
gl.bindTexture  (  g  1  .  TEXTURE_2D ,  texture); 


Una  vez  creada  la  textura  no  hay  que  olvidar  asignar  a  la  variable  de  tipo  sam- 
pler  del  shader  la  unidad  de  textura  que  ha  de  utilizar  (véase  listado  [63]). 


Listado  6.5:  Asignación  de  unidad  a  un  sampler2D 

//  Obtiene  el  índice  de  la  variable  del  shader  de  tipo  sampler2D 
program  .  texturelndex  = 

gl  .  getUniformLo catión  ( program  ,  ’  my Texture  ’ )  ; 

//  Indica  que  el  sampler  myTexture  del  shader  use 

//  la  unidad  de  textura  0 

gl  .  uniform  1  i  (  program  .  texturelndex  ,  0); 


Como  se  explicó  en  el  primer  punto  de  este  capítulo,  los  vértices  han  de  pro¬ 
porcionar  un  nuevo  atributo:  las  coordenadas  de  textura.  En  consecuencia,  hay  que 
habilitar  el  atributo  (véase  listado  6Á3)  y  también  especificar  cómo  se  encuentra 
almacenado  (véase  listado [677]). 


Listado  6.6:  Habilitación  del  atributo  de  coordenada  de  textura 

//  se  obtiene  la  r  efe  renda  al  atributo 
program.  vertexTexc oords Attribute  = 

gl  .  get  AttribLocation  (  program,  "  VertexTexcoords  " )  ; 

//  se  habilita  el  atributo 

gl  .  enableVertexAttribArray( program  .  vertexTexcoordsAttribute)  ; 
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Listado  6.7:  Especificación  de  tres  atributos:  posición,  normal  y  coordenadas  de  textura 

gl  .  bindBuffer  (  g  1  .  ARRAY_BUFFER ,  model .  idB uff erVertice s  )  ; 

gl  .  vertex  AttribPointer  ( program  .  vertexPo  sition  Attribute  ,  3, 

gl.FLOAT,  false  ,  8*4,  0); 

gl  .  vertex  AttribPointer  ( program  .  vertexNormal  Attribute  ,  3, 

gl.FLOAT,  false  ,  8*4,  3*4); 

gl  .  vertex  AttribPointer  ( program  .  vertexTexcoords  Attribute  ,  2, 
gl.FLOAT,  false  ,  8*4,  6*4); 


Ejercicios  - 

►  6.9  Ejecuta  el  programa  c06/aplicaTextura.html.  Experimenta  y  prueba  a  cargar  di¬ 
ferentes  texturas.  Como  resultado,  obtendrás  imágenes  similares  a  las  de  la  figura  |6T3 
Después,  edita  aplicaTextura.html  y  aplicaTextura.js  y  comprueba  cómo  se  han  incorpora¬ 
do  todos  los  cambios  necesarios  para  poder  utilizar  texturas  2D. 


Figura  6.13:  Ejemplos  obtenidos  utilizando  texturas  en  WebGL 


6.4.  Texturas  3D 

Una  textura  3D  define  un  valor  para  cada  punto  del  espacio.  Este  tipo  de  textu¬ 
ras  resulta  perfecta  para  objetos  que  son  creados  a  partir  de  un  medio  sólido  como 
una  talla  de  madera  o  un  bloque  de  piedra.  Son  una  extensión  directa  de  las  textu¬ 
ras  2D  en  las  que  ahora  se  utilizan  tres  coordenadas  (s,  7,  r),  y  donde  en  lugar  de 
téxeles  tenemos  vóxeles. 

La  principal  ventaja  de  este  tipo  de  texturas  es  que  el  propio  atributo  de  po¬ 
sición  del  vértice  se  puede  utilizar  como  coordenada  de  textura.  Sin  embargo,  son 
caras  de  almacenar  y  también  de  filtrar.  También  son  ineficientes  cuando  se  utilizan 
con  modelos  de  superficies,  ya  que  la  mayor  parte  de  la  información  que  la  textura 
almacena  nunca  se  utiliza.  Por  último,  cabe  señalar  que  WebGL  soporta  este  tipo 
de  texturas  a  partir  de  la  versión  2.0. 
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6.5.  Mapas  de  cubo 


Un  mapa  de  cubo  son  seis  imágenes  cuadradas  donde  cada  una  de  ellas  se  aso¬ 
cia  a  una  cara  del  cubo  distinta  y  que  juntas  capturan  un  determinado  entorno  (véase 
figura|67l4]).  Los  mapas  de  cubo  se  utilizan  principalmente  para  tres  aplicaciones: 

■  Reflection  mapping 

■  Refraction  mapping 

■  Skybox 


Figura  6.14:  Ejemplos  de  texturas  de  mapa  de  cubo  (fuente:  Emil  Persson  http  :  /  /www .  humus  . 
ñame) 


6.5.1.  Reflection  mapping 

Esta  técnica  de  aplicación  de  textura  sirve  para  simular  objetos  que  reflejan  su 
entorno.  En  la  literatura  también  aparece  con  el  nombre  de  environment  mapping. 
El  objetivo  es  utilizar  una  textura  que  contenga  la  escena  que  rodea  al  objeto  y,  en 
tiempo  de  ejecución,  determinar  las  coordenadas  de  textura  que  van  a  depender  del 
vector  dirección  del  observador  o,  mejor  dicho,  de  su  reflexión  en  cada  punto  de 
la  superficie.  De  esta  manera,  las  coordenadas  de  textura  cambian  al  moverse  el 
observador,  consiguiendo  que  parezca  que  el  objeto  refleja  su  entorno. 

A  la  textura  o  conjunto  de  texturas  que  se  utilizan  para  almacenar  el  entorno  de 
un  objeto  se  le  denomina  mapa  de  entorno.  Este  mapa  puede  estar  formado  por  solo 
una  textura,  a  la  cual  se  accede  utilizando  coordenadas  esféricas,  o  por  un  conjunto 
de  seis  texturas  cuadradas  formando  un  mapa  de  cubo.  Este  último  es  el  caso  que 
se  describe  en  esta  sección. 

El  cálculo  de  las  coordenadas  de  textura  se  realiza  de  la  siguiente  manera.  Para 
cada  punto  de  la  superficie  del  objeto  reflejante  se  obtiene  el  vector  de  reflexión 
R  respecto  a  la  normal  N  en  ese  punto  de  la  superficie  (véase  figura  |6d~5]).  Las 
coordenadas  de  este  vector  se  van  a  utilizar  para  acceder  al  mapa  de  cubo  y  obtener 
el  color.  En  primer  lugar,  hay  que  determinar  cuál  de  las  seis  texturas  se  ha  de 
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utilizar.  Para  ello,  se  elige  la  coordenada  de  mayor  magnitud.  Si  es  la  coordenada 
x ,  se  utilizan  la  cara  derecha  o  izquierda  del  cubo,  dependiendo  del  signo.  De  igual 
forma,  si  es  la  y  se  utilizan  la  de  arriba  o  la  de  abajo,  o  la  de  delante  o  de  detrás  si 
es  la  z.  Después,  hay  que  obtener  las  coordenadas  s  y  t  para  acceder  a  la  textura 
seleccionada.  Por  ejemplo,  si  la  coordenada  Rx  del  vector  de  reflexión  es  la  de 
mayor  magnitud,  las  coordenadas  de  textura  se  pueden  obtener  así: 


Figura  6.15:  Vectores  involucrados  en  reflection  mapping 


En  WebGL  una  textura  mapa  de  cubo  se  declara  de  tipo  samplerCube.  El  cálcu¬ 
lo  de  las  coordenadas  de  textura  se  realiza  de  manera  automática  al  acceder  a  la 
textura  mediante  la  función  texture ,  que  se  realiza  habitualmente  en  el  shader  de 
fragmentos,  igual  que  cuando  se  accedía  a  una  textura  2D.  El  vector  de  reflexión 
R  se  calcula  para  cada  vértice  mediante  la  función  reflect ,  y  el  procesador  gráfico 
hará  que  cada  fragmento  reciba  el  vector  R  convenientemente  interpolado.  El  lis- 
1  muestra  el  uso  de  estas  funciones  en  un  shader.  La  figura [óTTó] muestra  un 


6.8 


tado 


ejemplo  del  resultado  obtenido. 


Figura  6.16:  El  mapa  de  cubo  (que  se  muestra  a  la  derecha  en 
simular  que  el  toro  está  reflejando  su  entorno 


la  figura  6.14|)  se  ha  utilizado  para 
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Listado  6.8:  Cambios  en  el  shader  para  reflection  mapping 
//  Shader  de  vértices 

in  vec3  VertexNormal 

out  vec3  R;  //  vector  de  reflexión  en  el  vértice 
void  main()  { 

vec4  ecPosition  =  modelViewMatrix  *  vec4  ( vertexPo sition  ,1.0); 
vec3  N  =  normalize  ( normalMatrix  *  vertexNormal); 

vec3  Y  =  normalize  ( vec3(—  ecPo  sition  ))  ; 

R  =  r ef lee t (— V,  N)  ; 

! 

//  Shader  de  fragmentos 

uniform  samplerCube  myCubeMapTexture ; 

in  vec3  R;  //  vector  de  reflexión  interpolado 

void  main()  { 

fragmentColor  =  texture  (myCubeMapTexture  ,  R)  ; 

} 


6.5.2.  Refraction  mapping 


Esta  técnica  de  aplicación  de  textura  se  utiliza  para  simular  objetos  que  la  luz 
atraviesa  como  hielo,  agua,  vidrio,  diamante,  etc.  (véase  figura [6717]).  Las  coorde¬ 
nadas  de  textura  se  corresponden  con  el  vector  de  refracción  para  cada  punto  de 
la  superficie.  El  vector  de  refracción  se  calcula  a  partir  de  los  vectores  V  y  N  uti¬ 
lizando  la  ley  de  Snell.  Esta  ley  establece  que  la  luz  se  desvía  al  cambiar  de  un 
medio  a  otro  (del  aire  al  agua,  por  ejemplo)  en  base  a  un  índice  de  refracción.  El 
vector  de  refracción  se  calcula  con  la  función  refract  para  cada  vértice  en  el  shader 
de  vértices  y  el  procesador  gráfico  hará  que  cada  fragmento  reciba  el  vector  con¬ 


venientemente  interpolado.  En  el  listado  |6.9|  se  muestra  el  uso  de  estas  funciones 
en  ambos  shaders.  Además,  se  combina  el  resultado  de  la  reflexión  y  la  refracción, 
ya  que  es  habitual  que  los  objetos  refractantes  también  sean  reflejantes.  El  peso  se 
balancea  utilizando  la  variable  refractionFactor. 


6.5.3.  Skybox 

Un  skybox  es  un  cubo  muy  grande  situado  alrededor  del  observador.  El  objetivo 
de  este  cubo  es  representar  el  fondo  de  una  escena  que  habitualmente  contiene 
elementos  muy  distantes  al  observador,  como  por  ejemplo  el  sol,  las  montañas,  las 
nubes,  etc.  Como  textura  se  utiliza  un  mapa  de  cubo.  Las  coordenadas  de  textura  se 
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establecen  en  el  shader  de  vértices,  simplemente  a  partir  del  atributo  de  posición 
de  cada  vértice  del  Skybox.  El  procesador  gráfico  hará  que  cada  fragmento  reciba 
las  coordenadas  de  textura  convenientemente  interpoladas.  En  el  listado  |6.10|  se 
muestran  los  principales  cambios  para  dibujar  el  skybox. 


Listado  6.9:  Cambios  en  el  shader  para  refraction  mapping 
//  Shader  de  vértices 

in  vec3  VertexNormal ; 

out  vec3  RefractDir  ,  ReflectDir  ; 

void  main()  { 

ReflectDir  =  reflect(— V,  N)  ; 

RefractDir  =  refract(— V,  N,  material  .  refr actionlndex  )  ; 

i 

//  Shader  de  fragmentos 

uniform  samplerCube  myCubeMapTexture ; 
in  vec3  RefractDir  ,  ReflectDir  ; 

void  main()  { 

fragmentColor  =  mix  ( texture  ( myCubeMapTexture  ,  RefractDir), 

texture  (myCubeMapTexture  ,  ReflectDir)  , 
material  .  refractionF actor)  ; 

} 


Figura  6.17:  Ejemplo  de  refraction  mapping 
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Listado  6.10:  Cambios  en  el  shader  para  skybox 
//  Shader  de  vértices 


in  vec3  VertexPosition  ; 

out  vec3  tcSkybox  ;  //  coordenadas  de  textura  del  Skybox 

void  main()  { 

//  simplemente  asigna  a  tcSkybox  las  coordenadas  del  vértice 
tcSkybox  =  VertexPosition; 


//  Shader  de  fragmentos 

uniform  samplerCube  myCubeMapTexture ; 

in  vec3  tcSkybox;  //  coordenadas  de  textura  interpoladas 
void  main()  { 

fragmentColor  =  texture  (myCubeMapTexture  ,  tcSkybox); 

} 


Ejercicios 


►  6.10  El  listado 


6.11 


contiene  el  shader  para  que  un  modelo  refleje  su  entorno  y  ade¬ 


más  se  pinte  el  skybox.  Observa  que  con  el  mismo  shader  se  pinta  tanto  el  cubo  como  el 
modelo.  La  variable  skybox  se  utiliza  para  saber  si  se  está  pintando  uno  u  otro.  Por  otra 
parte,  la  matriz  invT  es  la  inversa  de  la  matriz  modelo-vista  del  skybox.  Recuerda  que  el 
skybox  ha  de  estar  centrado  en  la  posición  de  la  cámara.  Los  archivos  c06/cub eMap.html 
y  c06/cubeMap.js  implementan  la  creación  de  una  textura  de  mapa  de  cubo.  Edítalos  y 
estúdialos.  Observa  también  las  imágenes  de  la  figura  ( 


6.18 


para  ver  los  resultados  que  po¬ 
drías  obtener.  Interesantes,  ¿verdad?  Sin  duda,  un  ejemplo  inspirado  en  Fiat  Lux  de  Paul 
Debevec. 


Figura  6.18:  Ejemplos  obtenidos  utilizando  reflection  mapping  en  WebGL 
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Listado  6.11:  Shader  para  skybox  y  reflection  mapping 
//  Shader  de  vértices 

uniform  bool  skybox ; 

uniform  mat3  invT ; 
out  vec3  R; 

void  main()  { 

vec3  N  =  normalize  (  normalMatrix  *  VertexNormal )  ; 

vec4  ecPosition  =  modelViewMatrix  *  vec4  ( VertexPosition  ,1.0); 
gl_Position  =  proj ectionMatrix  *  ecPosition; 

if  (skybox) 

R  =  vec3  (  VertexPosition  )  ; 
else 

R  =  invT  *  reflect  (  normalize(  vec3  ( ecPo  sition )  )  ,  N)  ; 

i 

//  Shader  de  fragmentos 

uniform  samplerCube  myCubeMapTexture ; 
in  vec3  R; 

void  main()  { 

fragmentColor  =  texture  ( myCubeMapTexture  ,  R)  ; 

} 


►  6.11  Añade  refracción  al  ejercicio  anterior  (véase  figura [6719]).  Utiliza  índices  de  re¬ 
fracción  menores  que  1  (esto  es  debido  a  la  implementación  de  la  función  refract  en  GLSL). 
Para  cada  fragmento,  utiliza  la  función  mix  para  que  el  color  final  sea  un  15  %  el  valor  del 
reflejo  y  un  85  %  el  valor  de  refracción. 


Figura  6.19:  Ejemplos  obtenidos  utilizando  refraction  y  reflection  mapping  en  WebGL.  El  índice  de 
refracción  es,  de  izquierda  a  derecha,  de  0,95  y  0,99 
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6.6.  Normal  mapping 


Esta  técnica  consiste  en  modificar  la  normal  de  la  superficie  para  dar  la  ilusión 
de  rugosidad  o  simplemente  de  modificación  de  la  geometría  a  muy  pequeña  escala. 
A  esta  técnica  se  le  conoce  también  como  bump  mapping.  El  cálculo  de  la  variación 
de  la  normal  se  puede  realizar  en  el  propio  shader  de  manera  procedural  (véase 
imagen  6.20),  o  también  se  puede  precalcular  y  proporcionar  al  procesador  gráfico 


como  una  textura,  conocida  con  el  nombre  de  mapa  de  normales  o  bump  map. 


El  cálculo  de  la  iluminación  se  ha  de  realizar  en  el  espacio  de  la  tangente.  Este 
espacio  se  construye  para  cada  vértice  a  partir  de  su  normal,  el  vector  tangente  a 
la  superficie  en  dicho  punto  y  el  vector  resultante  del  producto  vectorial  de  esos 
dos  vectores,  que  se  denomina  vector  binormal.  Con  los  tres  vectores  se  crea  la 
matriz  que  permite  realizar  el  cambio  de  base.  Como  resultado,  la  normal  coincide 
con  el  eje  Z,  la  tangente  con  el  eje  X  y  la  binormal  con  el  eje  Y.  Entonces  se 
operan  los  vectores  L  y  V  con  esta  matriz  y  hacemos  que  el  procesador  gráfico  los 
interpole  para  cada  fragmento.  En  el  shader  de  fragmentos  se  accede  a  la  textura 
que  almacena  el  mapa  de  normales  y  a  partir  de  esta  normal  y  los  vectores  L  y  V 
interpolados  se  aplica  el  modelo  de  iluminación. 
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Figura  6.20:  Objetos  texturados  con  la  técnica  de  bump  mapping .  La  modificación  de  la  normal 
produce  que  aparentemente  la  superficie  tenga  bultos 


6.7.  Displacement  mapping 


Esta  técnica  consiste  en  aplicar  un  desplazamiento  en  cada  vértice  de  la  super¬ 
ficie  del  objeto.  El  caso  más  sencillo  es  aplicar  el  desplazamiento  en  la  dirección 
de  la  normal  de  la  superficie  en  dicho  punto.  El  desplazamiento  se  puede  alma¬ 
cenar  en  una  textura  a  la  que  se  le  conoce  como  mapa  de  desplazamiento.  En  el 
shader  de  vértices  se  accede  a  la  textura  que  almacena  el  mapa  de  desplazamien¬ 
to  y  se  modifica  la  posición  del  vértice,  sumándole  el  resultado  de  multiplicar  el 
desplazamiento  por  la  normal  en  el  vértice  (véase  figura [6721]). 
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Figura  6.21:  Ejemplo  de  desplazamiento  de  la  geometría 


6.8.  Alpha  mapping 

Esta  técnica  consiste  en  utilizar  una  textura  para  determinar  qué  partes  de  un 
objeto  son  visibles  y  qué  partes  no  lo  son.  Esto  permite  representar  objetos  que 
geométricamente  pueden  tener  cierta  complejidad  de  una  manera  bastante  sencilla 
a  partir  de  una  base  geométrica  simple  y  de  la  textura  que  hace  la  función  de  más¬ 
cara.  Es  en  el  shader  de  fragmentos  donde  se  accede  a  la  textura  para  tomar  esta 
decisión.  Por  ejemplo,  la  figura|6.22|muestra  una  textura  y  dos  resultados  de  cómo 
se  ha  utilizado  sobre  el  mismo  objeto.  En  el  primer  caso,  se  ha  utilizado  para  elimi¬ 
nar  fragmentos,  produciendo  un  objeto  agujereado  cuyo  modelado  sería  bastante 
más  complejo  de  obtener  utilizando  métodos  tradicionales.  En  el  segundo  caso,  el 
valor  del  alpha  map  se  ha  utilizado  para  decidir  el  color  definitivo  del  fragmento. 
Con  el  mismo  modelo  y  cambiando  únicamente  la  textura  es  muy  sencillo  obtener 
acabados  muy  diferentes  (véase  figura|6.23]). 


Figura  6.22:  Ejemplos  de  aplicación  de  la  técnica  alpha  mapping 


Ejercicios  - 

►  6.12  Con  la  ayuda  de  un  editor  gráfico,  crea  un  alpha  map  o  búscalo  en  internet.  Cár¬ 
galo  como  una  nueva  textura  y  utilízalo  para  obtener  resultados  como  los  que  se  muestran 
en  las  figuras [C22|y|6.23| 
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Figura  6.23:  Ejemplos  de  aplicación  de  diferentes  alpha  maps  sobre  el  mismo  objeto 


Cuestiones  - 

►  6.1  ¿En  qué  rango  varían  las  coordenadas  de  textura  en  el  espacio  de  la  textura?  ¿Qué 
ocurre  si  una  coordenada  de  textura  toma  un  valor  mayor  que  uno? 

►  6.2  ¿Cómo  se  consigue  que  cada  fragmento  tenga  sus  coordenadas  de  textura  cuando 
estas  se  especifican  por  vértice? 

►  6.3  ¿De  qué  tipo  es  la  variable  que  se  utiliza  para  acceder  a  una  unidad  de  textura? 

►  6.4  ¿Qué  es  una  unidad  de  textura?  ¿Y  un  objeto  textura? 

►  6.5  La  variable  de  tipo  sampler2D  contiene  un  identificador  del  ¿objeto  textura  o 
de  la  unidad  de  textura? 

►  6.6  ¿Dónde  se  asigna  un  objeto  textura  a  una  unidad  de  textura,  en  el  shader  o  en  el 
lado  de  la  aplicación? 

►  6.7  ¿Es  posible  que  desde  el  shader  se  pueda  acceder  a  varias  texturas  a  la  vez? 
¿Cómo  lo  harías? 

►  6.8  ¿Es  posible  acceder  a  una  textura  desde  el  shader  de  vértices  o  solo  se  puede 
desde  el  de  fragmentos? 

►  6.9  ¿Cuántas  unidades  de  textura  hay  disponibles  en  el  equipo  en  el  que  estás  hacien¬ 
do  los  ejercicios?  Recuerda  que  en  el  capítulo  1  se  muestra  un  ejemplo  de  cómo  conocer 
este  tipo  de  información. 

►  6.10  ¿Qué  vectores  intervienen  en  el  cálculo  de  las  coordenadas  de  textura  en  el  méto¬ 
do  de  Reflection-Mappingl  ¿Y  en  el  de  Refraction-Mappingl 

►  6.11  Al  dibujar  un  Skybox  con  WebGL,  ¿es  necesario  que  se  proporcionen  coordenadas 
de  textura  como  un  atributo  más  de  los  vértices  del  cubo? 

►  6.12  Si  deseas  utilizar  una  textura  de  mapa  de  cubo  para  simular  el  efecto  de  refracción, 
¿cómo  proporcionas  al  shader  el  índice  de  refracción  necesario  para  obtener  el  correspon¬ 
diente  vector  de  refracción,  como  un  atributo  del  vértice,  como  variable  uniform ,  como 
variable  in/out  o  como  una  constante? 

►  6.13  En  el  método  conocido  como  Normal  Mapping ,  indica  en  qué  shader  (vértices  o 
fragmentos)  se  accede  a  la  textura  que  almacena  el  mapa  de  normales. 
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Capítulo  7 

Texturas  procedurales 


A 

Indice 

7.1.  Rayadoj  ■ 
17.2.  Damasl.  . 
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Una  textura  procedural  se  caracteriza  porque  la  información  propia  de  la  tex¬ 
tura  la  genera  un  procedimiento  en  tiempo  de  ejecución,  es  decir,  la  textura  no  se 
encuentra  previamente  almacenada  tal  y  como  se  explicó  en  el  capítulo  |6j  Ahora, 
existe  una  función  que  implementa  la  textura  y  a  esta  función  se  le  llama  desde  el 
shader  para,  a  partir  de  unas  coordenadas  de  textura,  computar  y  devolver  un  valor. 
La  función  puede  devolver  tanto  un  valor  de  color  como  cualquier  otro  valor  que 
se  pueda  utilizar  para  determinar  el  aspecto  final  del  modelo  (véase  figura|7.l|).  Sin 
duda,  el  uso  de  texturas  procedurales  es  una  de  las  grandes  virtudes  que  ofrecen  los 
actuales  procesadores  gráficos  programables. 


Figura  7.1:  Ejemplo  de  objeto  dibujado  con  una  textura  procedural.  En  este  caso,  el  valor  devuelto 
por  la  función  de  textura  se  utiliza  para  determinar  si  hay  que  eliminar  un  determinado  fragmento 


Son  varias  las  ventajas  que  ofrece  el  uso  de  las  texturas  procedurales.  Por  ejem¬ 
plo,  una  textura  procedural,  en  general,  va  a  consumir  menos  memoria,  ya  que  al 
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no  estar  discretizada  no  presenta  los  problemas  derivados  de  tener  una  resolución 
fija  y  cualquier  aspecto  clave  de  la  textura  se  puede  parametrizar  para  obtener  efec¬ 
tos  muy  diversos  utilizando  la  misma  función.  Por  ejemplo,  las  copas  de  la  figura 


ra  cada  una  se  han  asignado  valores  diferentes  a  las  variables  o  parámetros  que 
gobiernan  el  número  y  tamaño  de  los  agujeros. 

También  es  cierto  que  no  todo  son  ventajas.  Por  ejemplo,  computacionalmente 
son  más  caras  y  los  algoritmos  que  hay  que  implementar  a  veces  son  muy  com¬ 
plejos,  incluso  también  podría  ocurrir  que  los  resultados  fueran  diferentes  según  el 
procesador  gráfico  que  se  utilice. 

En  definitiva,  combinar  texturas  basadas  en  imágenes  junto  con  texturas  proce- 
durales  será  casi  siempre  lo  ideal  (véase  figura |73|). 


7.1  se  han  obtenido  utilizando  exactamente  la  misma  textura  procedural,  pero  pa- 


Figura  7.2:  Ejemplo  de  combinación  de  textura  2D  y  textura  procedural.  A  la  izquierda  el  objeto  es 
dibujado  sin  textura,  en  el  centro  se  le  ha  aplicado  una  textura  2D,  y  a  la  derecha  se  ha  combinado  la 
textura  2D  con  una  textura  procedural 


7.1.  Rayado 


El  objetivo  de  este  tipo  de  textura  procedural  es  mostrar  un  rayado  sobre  la 
superficie  del  objeto  (véase  figura  [73]).  Se  utiliza  una  coordenada  de  textura  y  el 
rayado  que  se  obtiene  siempre  será  en  la  dirección  de  la  coordenada  elegida.  Se 
aplica  un  factor  de  escala  sobre  la  coordenada  de  textura  para  establecer  el  número 
de  rayas.  La  parte  real  de  la  coordenada  de  textura  se  compara  con  una  variable 
que  controla  el  ancho  de  la  raya  para  saber  si  el  fragmento  se  ha  de  colorear  con 
el  color  de  la  raya  o  con  el  del  material  del  modelo.  El  listado  [73]  muestra  estas 
operaciones. 


Ejercicios  - 

►  7.1  Ejecuta  el  ejemplo  c07/r ay ado.html.  Prueba  a  modificar  los  parámetros  que  go¬ 
biernan  el  rayado.  Estudia  cómo  gobiernan  el  aspecto  del  rayado  y  cómo  se  opera  con 
ellos.  ¿Qué  coordenada  de  textura  se  está  interpolando  para  cada  fragmento?  No  dejes  de 
averiguar  el  significado  de  las  funciones  fract,  step  y  mix. 
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►  7.2  Modifica  el  shader  de  fragmentos  en  c07/r ay ado.html  para  que  ahora  se  interpole 
la  otra  coordenada  de  textura  (véase  figura \1  A\. 

►  7.3  En  la  figura [73]  se  muestran  dos  imágenes  donde  las  rayas  se  obtienen  utilizando 
la  función  seno.  Piensa  cómo  podrías  conseguirlo.  Si  lo  intentas,  es  muy  probable  que 
consigas  otros  resultados  muy  interesantes  por  el  camino. 


Figura  7.4:  Ejemplos  del  shader  de  rayado  utilizando  la  otra  coordenada  de  textura 


Figura  7.5:  Ejemplos  del  shader  de  rayado  utilizando  la  función  seno 
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Listado  7.1:  Shader  de  rayado 


//  Shader  de  vértices 
out  float  texCoord ; 
void  main()  { 

texCoord  =  VertexTexcoords  .  s  ; 

} 

//  Shader  de  fragmentos 

uniform  vec3  StripeColor;  //  color  de  la  raya 

uniform  float  Scale  ;  //  número  de  rayas 

uniform  float  Width ;  //  ancho  de  la  raya 

in  float  texCoord ; 
out  vec4  fragmentColor ; 

void  main()  { 

float  scaledT  =  fract  ( texCoord  *  Scale); 
float  s  =  step  (Width,  scaledT); 

vec3  newKd  =  mix  (StripeColor,  Kd,  s); 

fragmentColor  =  vec4  ( phong  (newKd  ,N,  L ,V)  ,  1.0); 

} 


7.2.  Damas 

Este  tipo  de  textura  procedural  consiste  en  presentar  la  superficie  de  un  objeto 
como  la  del  tablero  del  juego  de  las  damas  (véase  figura  [Tó]).  Se  utiliza  un  factor 
de  escala  sobre  las  coordenadas  de  textura  para  establecer  el  número  de  cuadrados, 
en  principio  el  mismo  en  ambas  direcciones.  La  parte  entera  de  las  coordenadas  de 
textura  escaladas  se  utiliza  para  saber  a  qué  fila  y  columna  pertenece  cada  fragmen¬ 
to.  Sumando  ambas  y  obteniendo  el  módulo  dos  se  averigua  si  el  resultado  es  par 
o  impar  y,  en  consecuencia,  se  sabe  si  el  fragmento  pertenece  a  una  casilla  blanca 


o  negra.  El  listado  7.2  recoge  los  cambios  necesarios. 


Ejercicios 


►  7.4  Ejecuta  el  ejemplo  c7 /damas. html.  Pmeba  a  modificar  el  parámetro  que  gobierna 
el  número  de  cuadrados.  Ahora,  edita  el  código  y  modifícalo  para  que  se  pueda  establecer 
un  factor  de  escala  diferente  en  cada  dirección  (véase  figura|7.7|). 

►  7.5  En  el  listado  7.2  ¿con  qué  finalidad  se  utiliza  la  función  floor  en  el  shader  de 
fragmentos? 
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Figura  7.6:  Ejemplos  del  shader  de  damas 


Figura  7.7:  Ejemplo  del  shader  de  damas  utilizando  un  factor  de  escala  distinto  para  cada  dirección 


Listado  7.2:  Shader  de  damas 

//  Shader  de  vértices 
out  vec2  texCoord ; 
void  main()  { 

texCoord  =  VertexTexcoords  ; 

} 

//  Shader  de  fragmentos 

uniform  float  Scale  ;  //  número  de  cuadrados 

in  vec2  texCoord ; 

out  vec4  fragmentColor ; 

void  main()  { 

float  row  =  floor(  texCoord .  s  *  Scale  ); 

float  col  =  floor(  texCoord .  t  *  Scale  ); 

float  res  =  mod(  row  +  col  ,  2.0)  ; 
vec3  newKd  =  Kd  +  (res  *  0.4); 

fragmentColor  =  vec4  (phong (newKd ,N,L ,V)  ,  1.0); 

i 
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7.3.  Enrejado 


El  enrejado  consiste  en  utilizar  la  orden  discard  para  eliminar  fragmentos,  pro¬ 
duciendo  en  consecuencia  agujeros  en  la  superficie  del  objeto  (véanse  figuras [7TT|y 


7.8 ).  Las  coordenadas  de  textura  se  escalan  para  determinar  el  número  de  agujeros, 


utilizando  un  factor  de  escala  distinto  para  cada  dirección.  La  parte  real  se  utiliza 
para  controlar  el  tamaño  del  agujero.  El  listado [73] recoge  los  pasos  necesarios. 


Figura  7.8:  Ejemplos  del  shader  de  enrejado 


Listado  7.3:  Shader  de  enrejado 


//  Shader  de  vértices 
out  vec2  TexCoord; 
void  main()  { 

TexCoord  =  VertexTexcoords  ; 

1 


//  Shader  de  fragmentos 


uniform  vec2 
uniform  vec2 
in  vec2 

out  vec4 


Scale  ; 
Threshold ; 
TexCoord ; 
fragmentColor  ; 


void  main()  { 


float  ss  =  fr  act  ( TexCoord  .  s  *  Scale. s); 
float  tt  =  fr  act  ( TexCoord  .  t  *  Scale. t); 


if  ((ss  >  Threshold. s)  &&  (  tt  >  Threshold  .  t ) ) 
discard  ; 

fragmentColor  =  vec4  (phong  (N,L,V)  ,  1.0); 
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Ejercicios  - 

►  7.6  Ejecuta  el  ejemplo  c07 /enre jado.html.  Prueba  a  modificar  los  parámetros  que 
gobiernan  el  número  de  agujeros  y  su  tamaño. 

►  7.7  Ahora,  edita  el  código  y  modifícalo  para  que  se  eliminen  los  fragmentos  que  no 
pertenecen  a  la  superficie  de  un  círculo.  Fíjate  en  los  resultados  que  se  muestran  en  las 
imágenes  de  la  figura |7. 9 [ 


Figura  7.9:  Ejemplos  de  enrejados  circulares 


►  7.8  De  nuevo  realiza  las  modificaciones  necesarias  para  que  ahora  se  eliminen  los 
fragmentos  que  pertenecen  a  la  superficie  de  un  círculo.  Fíjate  en  el  resultado  que  se  mues¬ 
tra  en  la  imágen  de  la  figura |7.10| 


Figura  7.10:  Ejemplo  de  enrejado  circular  en  el  que  se  ha  eliminado  la  superficie  del  círculo 


7.4.  Ruido 


En  términos  generales,  el  uso  de  ruido  en  informática  gráfica  resulta  muy  útil 
para  simular  efectos  atmosféricos,  materiales  o  simplemente  imperfecciones  en  los 
objetos.  La  figura  [77TT|  muestra  algunos  ejemplos  en  los  que  se  ha  utilizado  una 
función  de  ruido  como  método  de  textura  procedural.  A  diferencia  de  otras  áreas, 
la  función  de  ruido  que  nos  interesa  ha  de  ser  repetible,  es  decir,  que  produzca 
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siempre  la  misma  salida  para  el  mismo  valor  de  entrada  y  que  al  mismo  tiempo 
aparente  aleatoriedad,  es  decir,  que  no  muestre  patrones  regulares. 


Figura  7.11:  Ejemplos  obtenidos  utilizando  una  función  de  ruido  como  textura  procedural 

La  función  de  ruido  se  ha  de  implementar  en  el  propio  shader.  También  se  po¬ 
dría  implementar  en  un  programa  externo,  ejecutarlo  y  almacenar  el  resultado  para 
proporcionarlo  en  forma  de  textura  al  procesador  gráfico,  pero  en  este  caso  ya  no 
se  puede  hablar  de  textura  procedural.  Por  ejemplo,  la  figura|7. 12|muestra  diversos 
ejemplos  de  objetos  en  los  que  se  ha  utilizado  una  función  de  ruido  de  Perlin  en  el 
shader  de  fragmentos  para  a  partir  de  la  posición  interpolada  de  cada  fragmento, 
obtener  un  valor  de  ruido  y  combinarlo  de  diferentes  formas  con  los  valores  de 
material. 


Figura  7.12:  Ejemplos  obtenidos  mediante  el  uso  de  la  función  de  mido  de  Perlin  en  el  shader  de 
fragmentos 


Ejercicios 


►  7.9  Ejecuta  los  ejemplos  c07Mubes.html  y  c07/sol.html  y  prueba  a  modificar  los  pa¬ 
rámetros  que  gobiernan  el  aspecto  final  de  los  modelos.  Después,  edita  el  código  y  prueba 
a  realizar  modificaciones  a  partir  de  los  valores  de  mido  obtenidos,  seguro  que  consigues 
resultados  interesantes.  Algunos  ejemplos  de  los  resultados  que  se  pueden  conseguir  se 
muestran  en  la  figura  ' 


7.13 
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Cuestiones  - 

►  7.1  ¿Qué  opciones  tenemos  para  utilizar  un  valor  de  ruido  en  WebGL  2.0? 

►  7.2  ¿Qué  desventaja  presenta  utilizar  texturas  de  ruido  frente  a  utilizar  funciones  de 
ruido? 

►  7.3  Si  deseas  utilizar  texturas  procedurales,  ¿estás  de  acuerdo  en  que  nunca  es  nece¬ 
sario  proporcionar  coordenas  de  textura  como  atributo  por  cada  vértice? 

►  7.4  Estudia  el  siguiente  shader  de  fragmentos  que  pinta  una  superficie  como  el  tablero 
de  las  damas.  Modifícalo  para  que  el  efecto  gobernado  por  la  variable  Scale  pueda  ser 
diferente  en  cada  una  de  las  dos  direcciones  de  la  textura. 

uniform  float  Scale; 
in  vec2  TexCoord; 
out  vec4  f ragmentColor ; 

void  main  (  )  { 

float  row  =  floor  (  TexCoord. s  *  Scale  ); 

float  col  =  floor  (  TexCoord. t  *  Scale  ); 

float  res  =  mod  (  row  +  col  ,  2.0  ); 

vec3  newKd  =  Kd  +  (  res  *  0.4  ) ; 

f ragmentColor  =  vec4  (  phong  (  newKd  )  ,  1.0  ); 


} 
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►  7.5  Estudia  el  siguiente  shader  de  fragmentos  que  elimina  algunos  fragmentos  pro¬ 
duciendo  agujeros  cuadrados  en  la  superficie  de  los  objetos.  Propon  las  modificaciones 
oportunas  para  que  en  lugar  de  agujeros  cuadrados  se  observen  agujeros  circulares  y  que  el 
radio  (válido  en  el  rango  [0, 0.5])  sea  un  parámetro  que  se  establezca  desde  la  aplicación. 

uniform  float  Scale; 
uniform  float  Threshold; 
out  vec4  f ragmentColor ; 

void  main  (  )  { 


float  ss  =  fract  (  TexCoord.s  *  Scale  ); 
float  tt  =  fract  (  TexCoord.t  *  Scale  ); 


if  (  (  ss  <  Threshold  )  &&  (  tt  <  Threshold  )  ) 

discard; 

f ragmentColor  =  vec4  (  phong  (  )  ,  1.0  ); 

} 

►  7.6  Estudia  el  siguiente  shader  de  fragmentos  que  pinta  una  superficie  como  el  tablero 
del  popular  juego  de  las  damas.  Modifícalo  para  que  ambos  tipos  de  casillas  se  pinten 
utilizando  la  misma  Kd  y  que  las  que  inicialmente  eran  de  color  más  claro  sean  ahora 
transparentes  con  un  grado  de  opacidad  del  20  %  (y  las  casillas  que  inicialmente  eran  de 
color  más  oscuro  sigan  siendo  opacas  al  100  %). 

uniform  float  Scale; 
in  vec2  TexCoord; 
out  vec4  f ragmentColor ; 

void  main  (  )  { 

float  row  =  floor  (  TexCoord.s  *  Scale  ); 

float  col  =  floor  (  TexCoord.t  *  Scale  ); 

float  res  =  mod  (row  +  col,  2.0); 

vec3  newKd  =  Kd  +  (  res  *  0.4  ) ; 

f ragmentColor  =  vec4  (  phong  (  newKd  )  ,  1.0  ); 

} 

►  7.7  Estudia  el  siguiente  shader  de  fragmentos  que  pinta  una  superficie  a  rayas.  Modi¬ 
fícalo  para  que  ahora  se  produzca  un  cambio  gradual  entre  el  color  de  la  raya  S  tripe  Color 
y  la  Kd. 

uniform  vec3  StripeColor; 
uniform  float  Scale; 
uniform  float  Width; 

in  float  TexCoord;  //  coordenada  de  textura  t 
out  vec4  f ragmentColor; 


void  main  (  )  { 

float  scaledT 
float  s 
vec3  newKd 
f ragmentColor 

} 


fract  (  TexCoord  *  Scale  ) ; 
step  (  Width  ,  scaledT  ) ; 
mix  (  StripeColor,  Kd,  s  ) ; 
vec4  (  phong  (  newKd  )  ,  1.0  ); 
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►  7.8  Estudia  el  siguiente  shader  de  fragmentos  y  modifícalo  para  que  la  raya  aparezca 
en  diagonal.  Haz  también  los  cambios  necesarios  para  que  se  pueda  establecer  el  número 
de  rayas  deseado. 

uniform  vec3  StripeColor; 

in  float  TexCoord;  //  coordenada  de  textura  s 
out  vec4  f ragmentColor ; 

void  main  (  )  { 

float  s  =  step  (  0.5  ,  TexCoord  ); 

vec3  newKd  =  mix  (  StripeColor,  Kd,  s  ) ; 
f ragmentColor  =  vec4  (  phong  (  newKd  )  ,  1.0  ); 

} 

►  7.9  Necesitas  el  modelo  de  media  esfera  para  incluirlo  en  tu  escena.  Sin  embargo, 
solo  dispones  del  modelo  de  una  esfera  completa  que  te  proporciona  tres  atributos  por 
vértice:  posición,  normal  y  coordenadas  de  textura.  Desarrolla  una  textura  procedural  que 
como  resultado  de  ordenar  el  dibujado  de  la  esfera  completa  produzca  que  solo  se  muestre 
la  mitad  de  ella  y  que  esta  mitad  siempre  se  corresponda  con  el  mismo  trozo  de  la  esfera 
(es  decir,  lo  mismo  que  obtendrías  si  dispusieras  del  modelo  de  media  esfera). 
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Este  capítulo  presenta  tres  aspectos  básicos  en  la  búsqueda  del  realismo  vi¬ 
sual  en  imágenes  sintéticas:  transparencia,  reflejos  y  sombras.  En  la  literatura  se 
han  presentado  numerosos  métodos  para  cada  uno  de  ellos.  Al  igual  que  en  ca¬ 
pítulos  anteriores,  se  van  a  presentar  aquellos  métodos  que,  aun  siendo  sencillos, 
consiguen  una  mejora  importante  en  la  calidad  visual  con  poco  esfuerzo  de  progra¬ 
mación. 


8.1.  Transparencia 

Los  objetos  transparentes  son  muy  habituales  en  el  mundo  que  nos  rodea.  Suele 
ocurrir  que  estos  objetos  producen  un  efecto  de  refracción  de  la  luz,  o  que  la  luz 
cambie  alguna  de  sus  propiedades  al  atravesarlos.  Todo  esto  hace  que  la  inclusión 
de  objetos  transparentes  en  un  mundo  virtual  sea  un  problema  complejo  de  resolver. 
En  esta  sección,  se  va  a  abordar  el  caso  más  sencillo,  es  decir,  suponer  que  el  objeto 
transparente  es  muy  fino  y  no  va  a  producir  el  efecto  de  refracción  de  la  luz  ni 
va  a  modificar  las  propiedades  de  las  fuentes  de  luz.  Quizá  pueda  parecer  que  se 
simplifica  mucho  el  problema,  lo  cual  es  cierto,  pero  aún  así  la  ganancia  visual  que 
se  va  a  obtener  es  muy  alta. 

Cuando  una  escena  incluye  un  objeto  transparente,  el  color  de  los  píxeles  cu¬ 
biertos  por  dicho  objeto  depende,  además  de  las  propiedades  del  objeto  transparente, 
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de  los  objetos  que  hayan  detrás  de  él.  Un  método  sencillo  para  incluir  objetos  trans¬ 
parentes  en  nuestra  escena  consiste  en  dibujar  primero  todos  los  objetos  que  sean 
opacos  y  dibujar  después  los  objetos  transparentes.  El  grado  de  transparencia  se 
suministra  al  procesador  gráfico  como  una  cuarta  componente  en  las  propiedades 
de  material  del  objeto,  conocida  como  componente  alfa.  Si  alfa  es  1,  el  objeto  es 
totalmente  opaco,  y  si  es  0  significa  que  el  objeto  es  totalmente  transparente  (véase 
figura  [8TT|).  Así,  el  color  final  se  calcula  a  partir  del  color  del  framebuffer  y  del 
color  del  fragmento  de  esta  manera: 

C final  alfa  •  C fragmento  “b  (1  alfa)  •  C framebuf fer  (8.1) 


Figura  8.1:  Tres  ejemplos  de  transparencia  con,  de  izquierda  a  derecha,  alfa  -  0.3,  0.5  y  0.7 


Al  dibujar  un  objeto  transparente,  el  test  de  profundidad  se  tiene  que  realizar 
de  igual  manera  que  al  dibujar  un  objeto  opaco  y  así  asegurar  que  el  problema  de 
la  visibilidad  se  resuelve  correctamente.  Sin  embargo,  ya  que  un  objeto  transpa¬ 
rente  deja  ver  a  través  de  él,  para  cada  uno  de  los  fragmentos  que  supere  el  test 
deberá  actualizarse  el  buffer  de  color,  pero  no  el  de  profundidad,  ya  que  de  hacerlo 
evitaría  que  otros  objetos  transparentes  situados  detrás  fuesen  visibles.  El  listado 


8J]recoge  la  secuencia  de  órdenes  de  WebGL  necesaria  para  poder  incluir  objetos 
transparentes  en  la  escena.  Sin  embargo,  se  ha  de  tener  en  cuenta  que  el  navegador 
compone  el  resultado  de  WebGL  con  la  página  y  que  al  utilizar  el  canal  alfa  puede 
producir  un  efecto  blanquecino  en  toda  la  escena.  Una  forma  sencilla  de  evitarlo  es 
especificar  en  el  fichero  .html  el  color  negro  como  color  de  fondo  del  can  vas: 


<style>  canvas 


background:  black; }  </style> 


En  el  caso  de  que  varios  objetos  transparentes  se  solapen  en  la  proyección, 
el  color  final  en  la  zona  solapada  es  diferente  dependiendo  del  orden  en  el  que 
se  hayan  dibujado  (véase  figura  |¿k2|).  En  este  caso,  habría  que  dibujar  los  objetos 
transparentes  de  manera  ordenada,  pintando  en  primer  lugar  el  más  lejano  y,  en 
último  lugar,  el  más  cercano  al  observador.  Sin  embargo,  en  ocasiones  la  ordena¬ 
ción  no  es  trivial,  como,  por  ejemplo,  cuando  un  objeto  atraviesa  otro.  En  estos 
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Listado  8.1:  Secuencia  de  operaciones  para  dibujar  objetos  transparentes 


// 

dibuja 

en 

primer  lugar  l 

os 

objetos  opacos 

// 

activa 

el 

cálculo  de  la 

tra 

nsparencia 

gl 

.  enable 

(gi 

.BLEND)  ; 

// 

especifica 

la  función  de 

cá 

leulo  de  la  transparencia 

gl 

.  blendFunc 

(  g  1  .  SRC_ALPHA , 

gl 

.  ONE_MINUS_SRC_ALPHA)  ; 

// 

impide 

la 

actualizad  ón 

del 

buffer  de  profundidad 

gl 

.  depthMask 

( false  )  ; 

// 

dibuja 

los 

objetos  transpar 

entes 

// 

de  sac  ti 

va 

el  cálculo  de 

la 

transparencia 

gl 

. disable 

(gl  .BLEND)  ; 

// 

permite 

ac 

Uualizar  el  b  uffe 

r  de  profundidad 

gl 

.  depthMask 

( true  )  ; 

casos,  una  forma  de  evitar  este  problema  es  establecer  la  operación  de  cálculo  de 
la  transparencia  como  un  incremento  sobre  el  color  acumulado  en  el  framebuffer. 


C final  alfü  •  C fragmento  “1“  C framebuf fer 


(8.2) 


Figura  8.2:  Dos  resultados  diferentes  en  los  que  únicamente  se  ha  variado  el  orden  en  el  dibujado  de 
los  objetos  transparentes 


En  WebGL,  esto  se  consigue  especificando  como  función  de  cálculo  gl.  ONE 
en  lugar  de  gl.  ONE_MINUS_SRC_ALPHA  (que  sería  la  que  corresponde  a  la  ecua¬ 
ción  8.1 ).  De  esta  manera,  el  orden  en  el  que  se  dibujen  los  objetos  transparentes  ya 


no  influye  en  el  color  final  de  las  zonas  solapadas.  Por  contra,  las  zonas  visibles  a 
través  de  los  objetos  transparentes  son  más  brillantes  que  en  el  resto,  produciendo 
una  diferencia  que  en  general  resulta  demasiado  notable  (véase  figura [83]). 
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Figura  8.3:  Los  planos  transparentes  de  la  izquierda  se  han  pintado  utilizando  la  función  gl.ONE 
mientras  que  en  los  de  la  derecha  se  ha  utilizado  gl.ONE _MINUS_SRC_ALPHA 


Hasta  el  momento  se  han  utilizado  como  objetos  transparentes  polígonos  sim¬ 
ples,  lo  que  resulta  suficiente  para  simular,  por  ejemplo,  una  ventana.  Pero,  ¿qué 
ocurre  si  es  un  objeto  en  el  que  lo  que  se  ve  a  través  de  él  es  a  él  mismo?  En 
esos  casos,  se  debe  prestar  atención  especial  al  orden  de  dibujado.  Dado  un  objeto 
transparente,  una  solución  muy  sencilla  consiste  en  dibujar  primero  las  caras  trase¬ 
ras  del  objeto  (que  dependen  de  la  posición  del  observador)  y  después  las  caras 
de  delante  del  objeto.  Por  suerte,  el  procesador  gráfico  implementa  en  su  pipeli- 
ne  la  eliminación  de  caras  de  manera  automática.  El  programador  debe  habilitarlo 
(gl .  enable  (gl .  CULL_FACE ) )  e  indicar  qué  caras  quiere  eliminar,  es  decir,  si 
quiere  eliminar  las  caras  de  la  parte  trasera  (gl .  cullFace  (gl .  BACK) ),  o  las 
de  la  delantera  (gl .  cullFace  (gl .  FRONT) ). 


Listado  8.2:  Objetos  transparentes 


//  Primero  pinta  los  objetos  opacos 


//  Después  los  transparentes 


gl  .  blendFunc  (  gl  .  SRC_ALPHA, 
gl . enable  (gl.BLEND); 
gl.  enable  (  g  1  .  CULL_FACE )  ; 
gl  .  depthMask  (  f  al  s e  )  ; 


gl  . ONE_MINUS_SRC_ALPHA)  ; 

//  habilita  la  transparencia 

//  habilita  el  face  culling 

//  impide  actualizar  el  buffer  de  prof. 


gl  .  cullFace  ( gl  .FRONT)  ;  //  se  eliminarán  los  de  cara  al  observador 

drawSolid  ( exampleCube )  ;  //  se  dibuja  el  objeto  transparente 

gl  .  cullFace  ( gl  .BACK)  ;  //  se  eliminarán  los  de  la  parte  trasera 

drawSolid  ( exampleCube )  ;  //  se  vuelve  a  dibujar  el  objeto 

gl  .  disable  (gl  . CULL_FACE)  ; 
gl . disable (gl .BLEND)  ; 
gl  .  depthMask(  true  )  ; 


El  listado  |Q|  recoge  la  secuencia  de  órdenes  de  WebGL  necesaria  para  poder 
visualizar  de  manera  correcta  este  tipo  de  objetos  transparentes.  Además,  suele  ser 
conveniente  aplicar  la  iluminación  por  ambas  caras,  ya  que  la  parte  trasera  ahora  se 
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ilumina  gracias  a  la  transparencia  del  propio  objeto.  La  fi gura |8.4| muestra  algunos 
resultados  obtenidos  con  esta  técnica. 

Ejercicios  - 

►  8.1  Observa  las  dos  esferas  de  la  figura  [872]  a  las  que  se  les  han  colocado  dos  planos 
transparentes  delante  de  ellas,  cada  plano  de  un  color  distinto,  y  cuya  única  diferencia  es  el 
orden  de  dibujado  de  dichos  planos.  ¿Cuál  de  ellas  te  parece  más  realista?,  ¿por  qué?,  ¿en 
qué  orden  crees  que  se  han  pintado  los  objetos  transparentes  que  aparecen  delante  de  cada 
esfera? 

►  8.2  Consulta  la  información  del  pipeline  de  WebGL  2.0  y  averigua  dónde  tienen  lugar 
las  operaciones  de  face  culling  y  blending. 

►  8.3  Ejecuta  el  programa  c08/transparencia.html.  Comprueba  que  en  el  código  figura 
todo  lo  necesario  para  dibujar  el  objeto  de  manera  transparente.  Observa  la  escena  movien¬ 
do  la  cámara  y  contesta,  ¿crees  que  el  objeto  transparente  se  observa  de  forma  correcta 
desde  cualquier  punto  de  vista?  Si  no  es  así,  ¿por  qué  crees  que  ocurre? 

►  8.4  Edita  c08/transparencia.js ,  establece  como  función  de  cálculo  gl.  ONE  en  lugar  de 

gl.ONE_MINUS_SRC_ALPHA  y  observa  el  nuevo  resultado. 


Figura  8.4:  Ejemplo  de  objeto  transparente  con,  de  izquierda  a  derecha,  alfa=  0.3,  0.5  y  0.7,  pintado 
utilizando  el  código  recogido  en  el  listado  p 


8.2 


8.2.  Espejos 

Los  objetos  reflejantes,  al  igual  que  los  transparentes,  son  también  muy  habi¬ 
tuales  en  cualquier  escenario.  Es  fácil  encontrar  desde  espejos  puros  a  objetos  que, 
por  sus  propiedades  de  material  y  también  de  su  proceso  de  fabricación,  como  el 
mármol,  por  ejemplo,  reflejan  la  luz  y  actúan  como  verdaderos  espejos.  Sin  em¬ 
bargo,  el  cálculo  del  reflejo  es  realmente  complejo,  por  lo  que  en  esta  sección  se 
muestra  un  truco  muy  habitual  para  conseguir  añadir  superficies  planas  reflejantes 
a  nuestra  escena  (véase  figura  [13])  y  que  de  una  manera  sencilla  nos  va  a  permitir 
obtener  muy  buenos  resultados  visuales. 

El  método  consiste  en  dibujar  la  escena  de  forma  simétrica  respecto  al  plano 
que  contiene  el  objeto  reflejante  (el  objeto  en  el  que  se  vaya  a  observar  el  reflejo). 
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Hay  dos  tareas  principales:  la  primera  es  obtener  la  transformación  de  simetría;  la 
segunda  es  evitar  que  la  escena  simétrica  se  observe  fuera  de  los  límites  del  objeto 
reflejante. 

8.2.1.  Obtener  la  matriz  de  simetría 

Para  obtener  la  matriz  de  simetría  hay  que  calcular  el  resultado  de  la  siguiente 
secuencia  de  transformaciones:  trasladar  el  plano  de  simetría  al  origen,  girarlo  para 
hacerlo  coincidir  con,  por  ejemplo,  el  plano  Z  —  0,  escalar  con  un  factor  de  —1  en 
la  dirección  Z  y,  por  último,  deshacer  el  giro  y  la  translación  anteriores.  La  matriz 
resultante  M$  es  la  siguiente,  donde  P  es  un  punto  que  pertenece  al  objeto  plano 
reflejante  y  N  es  la  normal  de  dicho  plano: 

-2 NxNy  -2 NXNZ  2 (P  ■  N)NX\ 

1-2  N*  -2  NyNz  2{P-N)Ny 
-2NyNz  1-2  N2z  2(P  ■  N)NZ  K  ’ 

0  0  1  / 


/I  —  2  Ni  ■ 


MS  = 


—2NxNy 

—2NXNZ 

0 


Figura  8.5:  Ejemplo  de  objeto  reflejado  en  una  superficie  plana 


8.2.2.  Evitar  dibujar  fuera  de  los  límites 

Para  la  segunda  tarea,  la  de  no  dibujar  fuera  de  los  límites  del  objeto  reflejante 
(véanse  figuras [8T6] y  |8.7|),  hay  varios  métodos.  Uno  de  ellos  consiste  en  utilizar  el 
buffer  de  plantilla  de  la  siguiente  forma.  En  primer  lugar,  se  dibuja  el  objeto  re¬ 
flejante  habiendo  previamente  deshabilitado  los  buffer s  de  color  y  de  profundidad, 
y  también  habiendo  configurado  el  buffer  de  plantilla,  para  que  se  pongan  a  1  los 
píxeles  de  dicho  buffer  que  correspondan  con  la  proyección  del  objeto.  Después, 
se  habilitan  los  buffers  de  profundidad  y  color  y  se  configura  el  buffer  de  plantilla 
para  rechazar  los  píxeles  que  en  el  buffer  de  plantilla  no  estén  a  1.  Entonces,  se 
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dibuja  la  escena  simétrica.  Después,  se  deshabilita  el  buffer  de  plantilla  y  se  di¬ 
buja  la  escena  normal.  Por  último,  de  manera  opcional,  hay  que  dibujar  el  objeto 
reflejante  utilizando  transparencia.  El  listado  [8 3]  muestra  cómo  se  realizan  estos 
pasos  con  WebGL.  El  ejemplo  c08/espejos.html  recoge  todas  las  operaciones  des¬ 
critas,  produciendo  imágenes  como  la  de  la  figura |8.7|  Una  última  observación,  en 
el  momento  de  obtener  el  contexto  es  necesario  solicitar  la  creación  del  bujfer  de 
plantilla  ya  que  este  no  se  crea  por  defecto: 

■  canvas . getContext (...,  (stencil : t rué } ) ; 


Figura  8.6:  Al  dibujar  la  escena  simétrica  es  posible  observarla  fuera  de  los  límites  del  objeto  refle¬ 
jante  (izquierda).  El  bujfer  de  plantilla  se  puede  utilizar  para  resolver  el  problema  (derecha) 


Figura  8.7:  Escena  en  la  que  el  suelo  hace  de  objeto  espejo 
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Listado  8.3:  Secuencia  de  operaciones  para  dibujar  objetos  reflejantes 


gl  .  clear  (  gl  . COLOR_BUFFER_BIT  I  g  1  . DEPTH_BUFFER_BIT  I 
gl  .  STENCIL_BUFFER_BIT)  ; 

//  Desactiva  los  buffers  de  color  y  profundidad 

gl  .  disable  (gl  .DEPTH_TEST)  ; 

gl  .  colorMask  (  false  ,false  ,false  ,false); 

//  Establece  como  valor  de  referencia  el  1 
gl . enable ( gl . STENCIL_TEST) ; 

gl  .  stencilOp  (gl  .REPLACE,  gl  .REPLACE,  gl  .REPLACE)  ; 
gl  .  stencilFunc(gl  .ALWAYS,1  , 0 xFFFFFFFF )  ; 

//  Dibuja  el  objeto  r efl ej ant e 


//  Activa  de  nuevo  los  buffers  de  profundidad  y  de  color 

gl  .  enable (gl . DEPTH_TEST ) ; 

gl  .  colorMask  ( true  ,  true  ,  true  ,  true  )  ; 

//  Configura  el  buffer  de  plantilla 
gl  .  stencilOp  (gl  .KEEP,  gl  . KEEP,  gl  .KEEP)  ; 
gl.  stencilFunc(gl  .EQUAL,  1  ,0  xFFFFFFFF)  ; 

//  Dibuja  la  escena  reflejada 


//  Desactiva  el  test  de  plantilla 
gl  .  disable  (gl  .  STENCIL_TEST )  ; 

//  Dibuja  la  escena  normal 


//  Dibuja  el  objeto  r  efl  ej  ant  e  con  transparencia 
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8.3.  Sombras 


En  el  mundo  real,  si  hay  fuentes  de  luz,  habrá  sombras.  Sin  embargo,  en  el 
mundo  de  la  informática  gráfica  podemos  crear  escenarios  con  fuentes  de  luz  y  sin 
sombras.  Por  desgracia,  la  ausencia  de  sombras  en  la  escena  es  algo  que,  además 
de  incidir  negativamente  en  el  realismo  visual  de  la  imagen  sintética,  dificulta  de 
manera  importante  su  comprensión,  sobre  todo  en  escenarios  tridimensionales.  Por 
ejemplo,  observa  las  dos  imágenes  de  la  figura 


8.8 


en  la  que  al  añadir  la  som¬ 
bra  entendemos  que  el  plano  está  en  el  aire  y  no  pegado  al  suelo.  Esto  ha  hecho 
que  en  la  literatura  encontremos  numerosos  y  muy  diversos  métodos  que  tratan 
de  aportar  soluciones.  Por  suerte,  prácticamente  cualquier  método  que  nos  permita 
añadir  sombras,  por  sencillo  que  sea,  puede  ser  más  que  suficiente  para  aumentar 
el  realismo  y  que  el  usuario  se  sienta  cómodo  al  observar  el  mundo  3D. 


Figura  8.8:  En  este  ejemplo,  la  misma  escena  se  interpreta  de  manera  distinta  dependiendo  de  si  se 
añade  o  no  la  sombra 


8.3.1.  Sombras  proyectivas 

Un  método  simple  para  el  cálculo  de  sombras  sobre  superficies  planas  es  el 
conocido  con  el  nombre  de  sombras  proyectivas.  Consiste  en  obtener  la  proyección 
del  objeto  situando  la  cámara  en  el  punto  de  luz  y  estableciendo  como  plano  de 
proyección  aquel  en  el  que  queramos  que  aparezca  su  sombra.  El  objeto  sombra, 
es  decir,  el  resultado  de  la  proyección,  se  dibuja  como  un  objeto  más  de  la  escena, 
pero  sin  propiedades  de  material  ni  iluminación,  simplemente  de  color  oscuro. 

Dada  una  fuente  de  luz  L  y  un  plano  de  proyección  N  •  x  +  d  =  0,  la  matriz  de 
proyección  M  es  la  siguiente: 


M 


N-L  +  d -  LXNX 

—  LyNX 

LZNX 

-Nx 


—  LXNy 

N  •  L  +  d  -  LyNy 

-LZNy 

-Ny 


LXNZ 

—  LyNz 

N-L  +  d  —  LZNZ 
~NZ 


Por  contra,  este  método  presenta  una  serie  de  problemas: 


Lxd\ 

—Lyd 

—Lzd 

N-LJ 

(8.4) 
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■  Como  el  objeto  sombra  es  coplanar  con  el  plano  que  se  ha  utilizado  para 
el  cálculo  de  la  proyección,  habría  que  añadir  un  pequeño  desplazamiento  a 
uno  de  ellos  para  evitar  el  efecto  conocido  como  stitching  (véase  figura|8.9|). 
WebGL  proporciona  la  orden  gl.polygonOffset  para  especificar  el  desplaza¬ 
miento,  que  se  sumará  al  valor  de  profundidad  de  cada  fragmento  siempre  y 
cuando  se  haya  habilitado  con  gl.enable  (gl.POLYGON_OFFSET_FILL). 


Figura  8.9:  Ejemplo  de  stiching  producido  por  ser  coplanares  el  suelo  y  el  objeto  sombra 


Hay  que  controlar  que  el  objeto  sombra  no  vaya  más  allá  de  la  superficie 
sobre  la  que  recae  (véase  figura  |8.10|).  Al  igual  que  en  la  representación 
de  espejos  (véase  sección  8.2),  el  buffer  de  plantilla  se  puede  utilizar  para 
asegurar  el  correcto  dibujado  de  la  escena. 


Figura  8.10:  El  objeto  sombra  supera  los  límites  de  la  superficie  sobre  la  que  recae 


■  Las  sombras  son  muy  oscuras,  pero  utilizando  transparencia  se  puede  conse¬ 
guir  un  resultado  mucho  más  agradable,  ya  que  deja  entrever  el  plano  sobre 
el  que  se  asientan  (véase  figura [8TTT]). 

■  Es  muy  complejo  para  superficies  curvas  o  para  representar  las  sombras  que 
caen  sobre  el  propio  objeto. 
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8.3.2.  Shadow  mapping 

Si  la  escena  se  observa  desde  la  posición  donde  se  ubica  la  fuente  de  luz,  lo 
que  se  consigue  es  ver  justo  lo  que  la  fuente  de  luz  ilumina,  por  lo  tanto,  se  cumple 
también  que  estará  en  sombra  lo  que  la  luz  no  ve.  Este  método  se  basa  en  dibujar 
primero  la  escena  vista  desde  la  fuente  de  luz  con  el  objetivo  de  crear  un  mapa  de 
profundidad  y  almacenarlo  como  textura.  Después,  se  dibuja  la  escena  vista  desde 
la  posición  del  observador  pero  consultando  la  textura  de  profundidad  para  saber 
si  un  fragmento  está  en  sombra  y  pintarlo  de  manera  acorde. 

Para  obtener  dicho  mapa  de  profundidad  con  WebGL  2.0,  es  necesario  dibujar 
la  escena  contra  un  framebuffer  object  (FBO).  El  procesador  gráfico  puede  dibujar 
en  un  fbo  diferente  del  creado  por  defecto,  y  en  ese  caso  su  contenido  no  es  visible 
al  usuario.  Este  fbo  debe  tener  asociado  una  textura  de  profundidad  puesto  que  esa 
información  es  la  única  que  nos  interesa.  Tras  crear  el  fbo,  se  dibuja  la  escena  y 
en  el  shader  de  fragmentos  no  hay  que  establecer  un  color  de  fragmento  (véase 
imagen  de  la  izquierda  en  la  figura |8T2|). 

Tras  el  primer  dibujado  se  consigue  que  la  información  de  profundidad  quede 
almacenada  en  la  textura  de  profundidad  que  se  había  asociado  al  fbo.  Al  dibujar 
la  escena  vista  desde  la  posición  del  observador,  cada  vértice  del  modelo  se  ha  de 
operar  también  con  la  matriz  de  transformación  de  la  cámara  situada  en  la  fuente 
de  luz.  De  esta  manera,  para  cada  fragmento  se  puede  comparar  su  profundidad 
con  la  almacenada  en  la  textura  y  saber  si  el  fragmento  está  en  sombra  o  no.  La 
figura |8T2] muestra  un  ejemplo  de  esta  técnica,  donde  se  puede  observar  el  mapa 
de  profundidad  obtenido  desde  la  posición  de  la  fuente  de  luz  y  la  vista  con  sombras 
desde  la  posición  de  la  cámara. 

Ejercicios  - 

►  8.5  Ejecuta  el  programa  c08/s ombras.html.  Observa  la  escena  mientras  mueves  la 
cámara  y  contesta,  ¿detectas  algún  tipo  de  problema  en  el  dibujado  de  las  sombras?,  ¿a  qué 
crees  que  se  debe?  Modifica  el  código  para  que  la  dimensión  de  la  textura  de  profundidad 
sea  de  un  tamaño  mucho  más  pequeño,  ¿qué  ocurre  ahora?,  ¿por  qué? 
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Figura  8.12:  Ejemplo  de  shadow  mapping.  A  la  izquierda  se  observa  el  mapa  de  profunidad  obtenido 
desde  la  fuente  de  luz;  a  la  derecha  se  muestra  la  escena  con  sus  sombras 


Cuestiones  - 

►  8.1  En  el  cálculo  de  la  transparencia  mediante  el  operador  over  se  utilizan  dos  valores 
de  color,  ¿cuáles  son? 

►  8.2  En  WebGL  2.0,  ¿cómo  se  establece  la  transparencia  a  nivel  de  fragmento? 

►  8.3  ¿Con  qué  objetivo  se  utiliza  la  orden  depthMask  a  la  hora  de  trabajar  con  escenas 
que  incluyen  objetos  transparentes?  Explica  también  por  qué  es  necesario,  es  decir,  qué 
tipo  de  problemas  pueden  ocurrir  si  no  la  utilizas. 

►  8.4  En  el  shader  de  fragmentos  implementado  en  el  ejemplo  transparencia.html  se 
realiza  el  cálculo  de  la  iluminación  para  ambas  caras  en  el  caso  de  los  objetos  transparentes, 
¿sabrías  explicar  por  qué? 

►  8.5  Dada  una  escena  que  contiene  una  única  fuente  de  luz  y  dado  un  objeto  que 
pertenece  a  dicha  escena,  si  se  hace  uso  del  método  de  sombras  proyectivas  ¿cuántas  veces 
se  ha  de  obtener  y  dibujar  el  correspondiente  objeto  sombra? 

►  8.6  Si  quiero  implementar  el  método  de  sombras  proyectivas,  ¿por  qué  y  en  qué  casos 
necesito  utilizar  un  buffer  de  plantilla? 

►  8.7  En  el  método  de  simulación  de  espejos  mediante  simetría,  argumenta  la  necesidad 
o  no  de  aplicar  la  matriz  de  transformación  de  simetría  a  las  coordenadas,  a  las  normales  y 
a  las  coordenadas  de  textura  para  que  el  reflejo  obtenido  sea  correcto. 

►  8.8  En  el  método  de  shadow  mapping ,  ¿por  qué  en  el  primer  dibujado  no  es  nece¬ 
sario  establecer  un  color  del  fragmento?  Escribe  el  código  del  correspondiente  shader  de 
fragmentos  para  el  primer  dibujado. 
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Capítulo  9 


Interacción  y  animación  con 
shaders 


A 
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9.1.1.  Utilizando  el  propio  canvas 
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Este  capítulo  junta  técnicas  de  interacción  con  métodos  básicos  de  animación 
con  shaders.  Es  un  capítulo  de  índole  muy  práctica  que  se  acompaña  de  ejemplos 
que  complementan  los  métodos  explicados. 


9.1.  Selección  de  objetos 

En  una  aplicación  interactiva  es  fácil  que  el  usuario  pueda  señalar  objetos  de 
la  escena  y  que,  por  tanto,  la  aplicación  necesite  saber  de  qué  objeto  se  trata.  Ha¬ 
bitualmente,  el  usuario  utiliza  el  ratón  para  mover  el  puntero  y  mediante  el  botón 
izquierdo  realiza  la  selección  al  presionarlo,  pero  también  puede  hacerlo  con  el  de¬ 
do  en  el  caso  de  utilizar  dispositivos  móviles  con  pantalla  táctil.  En  cualquier  caso, 
como  resultado  de  la  interacción  se  produce  un  evento  que  es  necesario  atender 
para  averiguar  las  coordenadas  del  píxel  sobre  el  que  se  hizo  el  clic. 

Para  averiguar  las  coordenadas  del  píxel  seleccionado  hay  que  tener  en  cuenta 
que  el  origen  de  coordenadas  en  el  navegador  está  en  la  esquina  superior  izquierda 
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de  la  página.  Por  lo  tanto,  al  hacer  el  clic,  el  manejador  de  eventos  nos  propor¬ 
ciona  las  coordenadas  respecto  a  dicho  origen.  Sin  embargo,  lo  que  necesitamos 
conocer  son  las  coordenadas  respecto  al  origen  de  WebGL  que  se  corresponde  con 
la  esquina  inferior  izquierda  del  canvas.  El  listado  [9d]  muestra  cómo  obtener  las 
coordendas  correctas  para  ser  utilizadas  en  WebGL. 


Listado  9.1:  Conversión  de  coordenadas  para  ser  utilizadas  en  WebGL 

rectangle  =  event  .  target  .  getB oundingClientRect  ()  ; 
x_in_canvas  =  ( event . clientX  —  rectangle . left ) ; 
y_in_canvas  =  (  rectangle  .  bottom  —  event .  client Y  )  ; 


A  partir  de  aquí  hay  dos  maneras  de  averiguar  de  qué  objeto  se  trata,  una  utili¬ 
zando  solo  el  canvas  y  la  otra  utilizando  además  un  FBO. 


9.1.1.  Utilizando  el  propio  canvas 

Este  método  consiste  en  dibujar  dos  veces  la  escena  de  manera  consecutiva.  En 
el  primer  dibujado  se  pinta  cada  objeto  seleccionable  de  un  color  diferente  y  plano 


(véase  figura  9.  l(a) ).  De  esta  manera,  si  tras  el  primer  dibujado  se  accede  al  canvas 


en  las  coordenadas  elegidas  por  el  usuario,  se  puede  averiguar  el  color  del  píxel 
correspondiente,  y  sabiendo  el  color  se  sabe  a  qué  objeto  pertenece.  Solo  quedaría 
borrar  el  canvas  y  pintar  de  nuevo  la  escena  pero  ya  con  el  aspecto  final  que  se  ha 
de  mostrar  al  usuario.  Por  supuesto,  el  usuario  nunca  llega  a  ver  la  escena  pintada 
con  colores  planos,  simplemente  se  dibuja  para  después  acceder  al  framebujfer  y 
conocer  el  color  del  píxel. 


El  listado|972|muestra  la  operación  de  acceso  al  color  de  un  píxel  que  se  realiza 
mediante  la  función  gl.readPixels.  La  variable pixels  contendrá  en  consecuencia  el 
valor  de  color  buscado.  Después,  ya  solo  resta  comparar  el  valor  leído  con  los  uti¬ 
lizados  al  dibujar  los  objetos,  borrar  el  framebujfer  con  la  orden  gl.clear  y  dibujar 
la  escena,  esta  vez  con  las  técnicas  habituales,  ya  que  este  nuevo  dibujado  sí  que 
será  el  que  finalmente  termine  mostrándose  al  usuario. 


(a)  Colores  planos  (b)  Aspecto  final 

Figura  9.1:  Las  dos  escenas  pintadas  para  la  selección  de  objetos 
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Listado  9.2:  Acceso  al  color  de  un  píxel  en  el  framebuffer 


var  pixels  =  new  Uint8 Array  (4)  ; 

gl  .  re adPixel s  (  x_in_canvas  ,  y_in_canvas  ,  1,  1,  gl  .RGBA, 

gl  .UNSIGNED  BYTE,  pixels); 


Para  implementar  esta  técnica  es  habitual  utilizar  un  flag  en  el  shader  de  frag¬ 
mentos  que  indique  si  el  objeto  se  ha  de  dibujar  o  no  utilizando  un  color  plano.  Este 
flag  sería  una  variable  de  tipo  uniform  bool  que  será  puesta  a  verdadero  o  falso  se¬ 
gún  el  caso.  Como  color  plano  es  buena  idea,  por  ejemplo,  aprovechar  la  propia 
componente  difusa  del  material  del  objeto  ya  que  este  valor  es  muy  probable  que 
se  encuentre  disponible  en  el  shader.  El  listado  9.3  muestra  un  ejemplo  muy  simple 


de  cómo  implementar  esta  técnica  en  el  shader  de  fragmentos. 


Listado  9.3:  Uso  de  un  flag  para  decidir  si  dibujar  o  no  con  un  color  plano 

fragmentColor  =  (flag  ==  false)  ?  vec4  (phong  (n  ,L,V)  ,  1.0) 

:  vec4  (  Material  . Kd,  1.0); 


Ejercicios  - 

►  9.1  Ejecuta  el  ejemplo  c09/seleccion.html  que  implementa  el  método  de  selección 
descrito  en  esta  sección.  Comprueba  su  funcionamiento.  Examina  la  atención  del  evento, 
la  obtención  de  las  coordenadas  del  píxel  seleccionado  y  cómo  se  determina  la  primitiva 
seleccionada  en  base  al  color  leído.  Modifícalo  para  que  el  plano  del  suelo  también  sea 
seleccionable. 

►  9.2  ¿Qué  valores  de  color  se  obtienen  al  seleccionar  cada  uno  de  los  objetos?  Com¬ 
prueba  cómo  estos  valores  coinciden  con  los  especificados  en  las  componentes  difusas  de 
los  respectivos  materiales. 


9.1.2.  Utilizando  un  FBO 

El  método  anterior  dibuja  la  escena  de  colores  planos  para  averiguar  el  objeto 
seleccionado  a  partir  del  momento  en  que  el  usuario  realiza  la  selección.  Si  la 
escena  muestra  objetos  estáticos,  esto  no  entraña  mayor  problema.  Sin  embargo, 
si  los  objetos  seleccionables  están  animados,  puede  ocurrir  que  la  selección  del 
usuario  y  lo  leído  en  el  framebuffer  no  coincida  debido  al  paso  del  tiempo  y  la 
correspondiente  actualización  de  los  objetos  de  la  escena.  Una  manera  de  evitarlo 
es  tener  la  escena  de  colores  planos  almacenada,  de  manera  que  al  realizar  el  clic 
sea  posible  realizar  la  consulta  sobre  la  escena  que  se  está  mostrando  al  usuario  y 
no  sobre  una  nueva. 

Esto  se  puede  conseguir  utilizando  un  nuevo  objeto  framebuffer  (FBO)  para  di¬ 
bujar  en  él  la  escena  con  colores  planos.  La  condición  es  que  este  fbo  almacene 
color  y  profundidad  y  que  tenga  el  mismo  tamaño  que  el  canvas.  Cuando  el  usuario 
realiza  la  selección,  el  fbo  ya  contiene  la  imagen  dibujada,  puesto  que  en  él  se  ha 
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dibujado  la  misma  escena  que  el  usuario  está  viendo,  solo  que  con  colores  planos. 
De  esta  manera,  lo  que  se  consigue  es  poder  realizar  la  consulta  sobre  lo  ya  dibu¬ 
jado.  El  listado  [9~4]  muestra  la  operación  de  acceso  al  color  de  un  píxel.  Se  puede 
observar  que  la  única  variación  es  que  antes  de  llamar  a  la  función  gl.readPixels 
se  activa  el  FBO  creado  a  proposito  y  después  se  vuelve  a  establecer  el  framebuffer 
por  defecto. 


Listado  9.4:  Acceso  al  color  de  un  píxel  en  el  FBO 

gl  .  bindFramebuffer  (  gl  .FRAMEBUFFER,  myFbo)  ;  //  selecciona  el  FBO 
var  pixels  =  new  Uint8Array  (4)  ; 

gl . readPixels ( x_in_canvas  ,  y_in_canvas  ,  1,  1,  gl  .RGBA, 
gl  . UNSIGNED  BYTE,  pixels  )  ; 

gl  .  bindFramebuffer  (  gl  .FRAMEBUFFER,  nuil);  //  framebuffer  normal 


Ejercicios  - 

►  9.3  Ejecuta  el  ejemplo  c09/seleccionFbo.html  que  implementa  el  método  de  selección 
que  utiliza  un  objeto  framebuffer. 

■  Comprueba  su  funcionamiento. 

■  Examina  cómo  se  determina  la  primitiva  seleccionada  en  base  al  color  leído  a  partir 
de  la  escena  ya  dibujada. 

■  ¿Hay  algún  cambio  en  el  shader  de  fragmentos  respecto  al  implementado  en  el 
método  anterior? 

■  ¿De  qué  tamaño  es  el  FBO?,  ¿y  el  canvas?,  ¿qué  ocurriría  si  no  coincidiesen  ambos 
tamaños? 


9.2.  Animación 

Realizar  animación  a  través  de  shaders  puede  resultar  muy  sencillo.  Solo  nece¬ 
sitamos  una  variable  uniforme  en  el  shader  y  que  esta  se  actualice  desde  la  aplica¬ 
ción  con  el  paso  del  tiempo.  En  el  shader  se  utilizará  dicha  variable  para  modificar 
cualquiera  de  las  propiedades  de  los  objetos. 

Por  ejemplo,  si  se  modifica  el  valor  alfa  que  controla  la  opacidad  de  un  objeto, 
podemos  conseguir  que  este  aparezca  o  se  desvanezca  de  forma  gradual;  también 
modificar  parámetros  de  las  fuentes  de  luz  haciendo  que,  por  ejemplo,  la  intensidad 
de  la  luz  aumente  o  decaiga  de  forma  gradual  o  que  los  objetos  cambien  su  color. 
Por  supuesto,  también  podemos  modificar  la  matriz  de  transformación  del  modelo 
cambiando  la  posición,  el  tamaño  o  la  orientación  de  algún  objeto  de  la  escena  o, 
por  qué  no,  añadir  dos  materiales  a  un  objeto  y  hacer  que  un  objeto  cambie  de 
material  con  una  simple  interpolación  lineal. 
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9.2.1.  Eventos  de  tiempo 

JAVASCRIPT  proporciona  una  orden  para  especificar  que  una  determinada  fun¬ 
ción  sea  ejecutada  transcurrido  un  cierto  tiempo.  La  disponibilidad  de  una  función 
de  este  tipo  es  fundamental  para  actualizar  la  variable  del  shader  que  se  utiliza  para 
generar  la  animación.  La  función  es  la  siguiente: 

■  myVar  =  setTimeout (updateStuf f ,  40); 

El  valor  numérico  indica  el  número  de  milisegundos  que  han  de  transcurrir 
para  que  se  llame  a  la  función  updateStuff.  Una  vez  transcurrido  dicho  tiempo,  esa 
función  se  ejecutará  lo  antes  posible.  Si  se  desea  que  la  función  se  ejecute  otra  vez 
al  cabo  de  un  nuevo  periodo  de  tiempo,  ella  misma  puede  establecerlo  llamando 
a  la  función  setTimeout  antes  de  finalizar.  Otra  alternativa  es  utilizar  la  siguiente 
orden,  que  produce  la  ejecución  de  updateStuff  cada  40  ms: 

■  myVar  =  set Interval (updateStuf f,  40); 

Y  para  suspender  la  ejecución: 

■  clearlnterval (myVar) ; 


9.2.2.  Encendido  /  apagado 


Un  efecto  muy  simple  de  animación  consiste  en  que  una  propiedad  tome  dos 
valores  diferentes  que  van  alternándose  a  lo  largo  del  tiempo,  como  podrían  ser  la 
simulación  del  parpadeo  de  una  luz  al  encenderse  o  el  mal  funcionamiento  de  un 
tubo  fluorescente.  Para  implementar  esta  técnica  es  habitual  utilizar  un  flag  en  el 
shader  de  fragmentos  que  indique  si  el  objeto  se  ha  de  dibujar  de  una  manera  u 
otra.  Est eflag  sería  una  variable  de  tipo  uniform  bool  que  será  puesta  a  verdadero 
o  falso  según  el  caso.  Por  ejempo,  es  buena  idea  aprovechar  la  propia  componente 
ambiente  del  material  del  objeto  para  el  estado  de  apagado  ya  que  este  valor  es 
muy  probable  que  se  encuentre  disponible  en  el  shader.  El  listado 


9.5 


muestra  un 

ejemplo  muy  simple  de  cómo  implementar  esta  técnica  en  el  shader  de  fragmentos 
en  el  que  la  variable  apagado  indica  el  estado,  es  decir,  si  encendido  o  apagado). 


Listado  9.5:  Shader  para  encendido  /  apagado 


//  Shader  de  fragmento s 

uniform  bool  apagado;  //  almacena  el 

estado 

void  main()  { 

fragmentColor  =  (apagado  ==  false) 

?  vec4 

(phong (n ,L,V) , 

1.0)  : 

} 

vec4 

(  Material  .  Ka , 

1.0)  ; 
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En  la  aplicación  es  habitual  que  dicha  variable  esté  gobernada  por  un  simple 
proceso  aleatorio.  Por  ejemplo,  la  función  setFlickering  en  el  listado  9Á)  recibe  un 
valor  como  parámetro  que  se  compara  con  un  número  aleatorio.  De  esta  manera, 
se  puede  controlar  la  preferencia  hacia  uno  de  los  dos  estados  posibles. 


Listado  9.6:  Función  que  controla  el  encendido  /  apagado 


function  setFlickering  (  valué  )  { 

if  (Math  .  random  ()  >  valué)  //  Math  .  random  en  [0..1] 

gl  .  uniformli  (program.  apagadolndex  , 
else 

false  )  ; 

gl  .  uniformli  (program  .  apagadolndex  , 

} 

true  )  ; 

Ejercicios  - 

►  9.4  Ejecuta  el  ejemplo  c09/onOff.html  que  implementa  el  método  de  animación  de 
encendido  /  apagado.  Comprueba  su  funcionamiento.  Examina  cómo  se  establece  un  valor 
diferente  de  parpadeo  para  cada  primitiva,  de  manera  que  algunas  se  ven  más  tiempo  en¬ 
cendidas  y  otras  más  tiempo  apagadas.  Realiza  las  modificaciones  necesarias  para  que,  en 
lugar  de  encendido  /  apagado,  sea  encendido  /  sobreiluminado. 


9.2.3.  Texturas 


Modificar  las  coordenadas  de  textura  con  el  tiempo  es  algo  sencillo  y  de  lo 
que  se  pueden  obtener  resultados  muy  interesantes.  Por  ejemplo,  en  el  caso  de 
ser  una  textura  2D,  se  podría  simular  un  panel  publicitario  rotativo.  En  el  caso 
de  utilizar  una  textura  procedural,  por  ejemplo,  el  shader  de  nubes  utilizado  en 
el  ejemplo  c07Mubes.html ,  modificar  las  coordenadas  de  textura  permite  que  su 
aspecto  cambie  suavemente  con  el  tiempo.  En  cualquier  caso,  solo  es  necesario 


utilizar  una  variable  que  se  incremente  con  el  paso  del  tiempo  (véase  listado  |9.7|) 
y  que  a  su  vez  se  utilice  para  incrementar  las  coordenadas  de  textura  en  el  shader , 


como  se  muestra  en  el  listado  |9.8|  De  esta  manera,  a  cada  instante  de  tiempo  las 
coordenadas  de  textura  de  cada  vértice  son  diferentes,  produciéndose  el  efecto  de 
animación. 


Ejercicios  - 

►  9.5  Ejecuta  el  ejemplo  c09Mubes.html  que  implementa  el  método  de  animación  basa¬ 
do  en  modificar  las  coordenadas  de  textura  con  el  tiempo.  Comprueba  su  funcionamiento. 
Examina  cómo  se  modifican  las  coordenadas  de  textura  para  acceder  a  la  función  de  ruido. 
Ahora  ponlo  en  práctica.  Parte  del  ejemplo  c06/aplicaTexturas.html  y  modifícalo  para  que 
la  textura  se  desplace  sobre  la  superficie  de  las  primitivas  con  el  paso  del  tiempo. 
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Listado  9.7:  Función  que  actualiza  el  desplazamiento  de  la  textura  con  el  tiempo 
var  texCoordsOff set  =  0.0,  Velocity  =  0.01; 

function  updateTexCoordsOffset  ()  { 

texCoordsOffset  +=  Velocity; 

gl  .  uniform  1  f  ( program  .  texCoordsOff  setlndex  ,  texCoordsOffset); 
requestAnimationFrame  (  drawScene )  ; 

} 

function  initWebGLQ  { 

setlnterval  (updateTexCoordsOffset  ,40)  ; 


Listado  9.8:  Shader  para  actualizar  las  coordenadas  de  textura  con  el  tiempo 
//  Shader  de  fragmentos 

uniform  float  texCoordsOffset; 

void  main()  { 

vec2  newTexCoords  =  texCoords  ; 
newTexCoords  .  s  +=  texCoordsOffset; 

fragmentColor  =  textur  e  ( myTexture  ,  newTexCoords); 


9.2.4.  Desplazamiento 


En  la  sección  |6.7|  se  explicó  el  método  que  permite  utilizar  una  textura  como 
mapa  de  desplazamiento  para  que  en  tiempo  de  ejecución  cada  vértice  se  desplace 
a  partir  del  valor  leído  del  mapa.  Ahora,  lo  que  se  persigue  es  animar  la  geometría, 
haciendo  que  el  desplazamiento  de  cada  vértice  no  sea  siempre  el  mismo,  sino 
que  cambie  con  el  tiempo.  La  figura [9^2(a)| muestra  dos  ejemplos  en  los  que  en  el 
shader  de  vértices  se  ha  utilizado  la  función  seno  con  diferente  amplitud  de  onda 
para  calcular  el  desplazamiento  en  función  del  tiempo  transcurrido.  En  la  figura 
|9.2(b)|  se  muestra  el  resultado  de  utilizar  una  función  de  ruido  para  determinar  el 
desplazamiento.  El  valor  de  tiempo  se  utiliza  como  parámetro  de  entrada  de  la 
función  de  ruido,  obteniéndose  el  efecto  de  una  bandera  al  viento. 


Ejercicios  - 

►  9.6  El  ejemplo  c09/vd.html  implementa  el  método  de  animación  basado  en  desplaza¬ 
miento.  Ejecútalo  y,  por  ejemplo,  prueba  a  escalar  el  valor  del  desplazamiento. 
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(a)  Desplazamiento  producido  por  la  función  seno 


(b)  Desplazamiento  producido  por  la  función  de  ruido 
Figura  9.2:  Objetos  animados  con  la  técnica  de  desplazamiento 


9.3.  Sistemas  de  partículas 

Los  sistemas  de  partículas  son  una  técnica  de  modelado  para  objetos  que  no 
tienen  una  frontera  bien  definida  como,  por  ejemplo,  humo,  fuego  o  un  espray. 
Estos  objetos  son  dinámicos  y  se  representan  mediante  una  nube  de  partículas  que, 
en  lugar  de  definir  una  superficie,  definen  un  volumen.  Cada  partícula  nace,  vive 
y  muere  de  manera  independiente.  En  su  periodo  de  vida,  una  partícula  cambia  de 
posición  y  de  aspecto.  Atributos  como  posición,  color,  transparencia,  velocidad, 
tamaño,  forma  o  tiempo  de  vida  se  utilizan  para  definir  una  partícula.  Durante  la 
ejecución  de  un  sistema  de  partículas,  cada  una  de  ellas  se  debe  actualizar  a  partir 
de  sus  atributos  y  de  un  valor  de  tiempo  global. 

Las  figuras [9 3] y |9.4| muestran  ejemplos  de  un  sistema  en  el  que  cada  partícula 
es  un  cuadrado  y  pretenden  modelar  respectivamente  un  mosaico  y  pequeñas  ban¬ 
deras  en  un  escenario  deportivo.  En  ambos  casos,  a  cada  partícula  se  le  asigna  un 
instante  de  nacimiento  aleatorio  de  manera  que  las  piezas  del  mosaico,  o  las  ban¬ 
deras,  aparecen  en  instantes  de  tiempo  diferentes.  Mientras  están  vivas,  para  cada 
partícula  se  accede  a  una  textura  de  ruido  utilizando  la  variable  que  representa  el 
paso  del  tiempo  y  así  no  acceder  siempre  al  mismo  valor  de  la  textura  con  el  fin  de 
actualizar  su  posición.  A  cada  partícula  también  se  le  asigna  de  forma  aleatoria  un 
valor  de  tiempo  final  que  representa  el  instante  en  que  la  partícula  debe  desaparecer. 
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Figura  9.3:  Animación  de  un  mosaico  implementado  como  sistema  de  partículas 


Figura  9.4:  Animación  de  banderas  implementada  como  sistema  de  partículas 


Todas  las  partículas,  junto  con  sus  atributos,  pueden  ser  almacenadas  en  un 
buffer  object.  De  esta  manera,  en  el  shader  de  vértices  se  determina  el  estado  de 
la  partícula,  es  decir,  si  aún  no  ha  nacido,  si  está  viva  o  si  por  el  contrario  ya 
ha  muerto.  En  el  caso  de  estar  viva,  es  en  dicho  shader  donde  se  implementa  su 
comportamiento.  Por  lo  tanto,  la  visualización  de  un  sistema  de  partículas  se  realiza 
totalmente  en  el  procesador  gráfico  sin  carga  alguna  para  la  CPU.  Para  simplificar 
el  dibujado  de  un  sistema  de  partículas  se  asume  que  las  partículas  no  colisionan 
entre  sí,  no  reflejan  luz  y  no  producen  sombras  sobre  otras  partículas. 


Un  ejemplo  de  creación  de  un  sistema  de  partículas  se  muestra  en  el  listado  9.9 


En  concreto  se  crean  diez  mil  partículas;  a  cada  partícula  se  le  asigna  una  velocidad 
y  una  posición  a  lo  largo  del  eje  X ,  ambas  aleatorias,  y  un  valor  de  nacimiento.  Esta 
información  se  almacena  en  el  vector  particleslnfo ,  el  cual  se  transfiere  a  un  buffer 
object. 

El  listado  [9TÜ| muestra  cómo  se  ordena  el  dibujado  del  sistema  de  partículas. 
En  este  ejemplo,  cada  partícula  consta  de  dos  atributos,  posición  e  instante  de  na¬ 
cimiento,  y  el  sistema  se  dibuja  como  una  colección  de  puntos. 

Por  útltimo,  en  el  shader  de  vértices  se  comprueba  si  la  partícula  ha  nacido 
y,  si  es  así,  se  calcula  su  posición  a  partir  del  valor  de  posición  X  y  el  valor  de 
velocidad  almacenado  en  la  posición  Y,  junto  con  el  valor  del  tiempo  transcurrido. 
El  listado [9TT]muestra  este  último  paso.  La  figura [93] muestra  dos  ejemplos  en  los 
que  únicamente  cambia  el  tamaño  del  punto. 
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Listado  9.9:  Cortina  de  partículas 

10000; 


var  numParticles 
function  initParticleSy stem  ()  { 
var  particleslnfo  =  []; 

for  (var  i=  0;  i  <  numParticles;  i ++)  { 

//  velocidad 

var  alpha  =  Math  .  random  ()  ; 

var  velocity  =  (0.1  *  alpha)  +  (0.5  *  (1.0  —  alpha)); 
//  p  o sici  ón 

var  x  =  Math  .  random  ()  ; 
var  y  =  velocity  ; 
var  z  =  0.0; 


particleslnfo  [  i 
particleslnfo  [  i 
particleslnfo  [  i 
particleslnfo  [  i 


*4  +  0] 
*4+1] 
*4  +  2] 
*4+3] 


x ; 

y; 

z  ; 

i  *  0.00075;  //  nacimiento 


program  .  idB uff erVertices  =  gl  .  createB uff er  ()  ; 

gl  .  bindBuffer  (  gl  .  ARRAY_BUFFER,  program  .  idBufferVertices  )  ; 

gl  .  bufferData  (  gl  .  ARRAY_BUFFER, 

new  Float32Array  (  particlesData  )  , 
gl  . STATIC_DRAW)  ; 


Listado  9.10:  Dibujado  del  sistema  de  partículas 
function  drawParticleSy stem  ()  { 

gl  .  bindBuffer  (  gl  .  ARRAY_BUFFER,  program  .  idBufferVertices  )  ; 
gl  .  vertex AttribPointer  (program  .  vertexPositionAttribute  , 

3,  gl.FLOAT,  false  ,  4*4,  0); 

gl  .  vertex  AttribPointer  ( program  .  vertexStart  Attribute  , 

1  ,  g  1  . FLO AT ,  false,  4*4,  3*4); 

gl  .  drawArrays  (gl.POINTS,  0,  numParticles); 

} 


Ejercicios  - 

►  9.7  El  ejemplo  c09/p articulas.html  implementa  la  animación  de  un  sistema  de  partí¬ 
culas.  Ejecútalo  y  experimenta  con  él  para  comprenderlo  mejor. 

►  9.8  Modifica  el  ejemplo  para  que  el  sistema  de  partículas  tenga  profundidad.  Tendrás 
que  modificar  tanto  el  js  como  el  shader.  El  efecto  que  se  consigue  es  muy  interesante. 
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Listado  9.1 1:  Shader  de  vértices  para  el  sistema  de  partículas 


in  vec3  VertexPosition  ; 
in  float  VertexStart; 

void  main()  { 

vec3  pos  =  vec3(0.0); 

if  (Time  >  VertexStart)  {  //  si  ha  nacido 

float  t  =  Time  —  VertexStart; 
if  (t  <  2.0)  {  //  si  aún  vive 

pos.x  =  VertexPo  sition  .  x  ; 
pos. y  =  VertexPo  sition  .  y  *  t; 
alpha  =  1.0  —  t  /  2.0; 

i 

i 

vec4  ecPosition  =  modelViewMatrix  *  vec4  ( pos  ,  1 . 0 )  ; 

gl_Position  =  proj ectionMatrix  *  ecPosition; 

gl_PointSize  =  6.0; 

i 


Figura  9.5:  Ejemplo  de  sistema  de  partículas  dibujado  con  tamaños  de  punto  diferentes 


Cuestiones  - 

►  9.1  Justo  después  de  que  un  usuario  realice  la  acción  de  selección  de  un  objeto  es 
necesario  averiguar  de  qué  objeto  se  trata,  ¿cuál  de  los  dos  métodos  vistos  en  este  capítulo 
no  necesita  dibujar  la  escena  justo  a  continuación  del  clic  para  averiguar  de  qué  objeto  se 
trata? 

►  9.2  De  entre  los  dos  métodos  vistos  en  este  capítulo  para  selección  de  objetos,  ¿cuál  es 
la  principal  ventaja  que  proporciona  el  método  que  usa  un  FBO  y  en  qué  casos  se  produce? 
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►  9.3  En  el  proceso  de  selección  de  un  objeto,  ¿por  qué  no  puedo  utilizar  directamente 
las  coordenadas  obtenidas  a  través  de  la  variable  event  con  la  orden  gl.readPixelsl 

►  9.4  En  un  sistema  de  partículas  genérico,  ¿cómo  se  proporciona  al  shader  el  valor  de 
nacimiento  de  cada  partícula? 

►  9.5  Supon  que  en  tu  escenario  virtual  deseas  incluir  una  valla  publicitaria.  Esta  valla 
ha  de  mostrar  dos  imágenes  alternas  en  el  tiempo,  intercambiándolas  cada  10  segundos. 
El  cambio  de  una  imagen  a  otra  se  realiza  mediante  un  desplazamiento  vertical  y  dura  un 
segundo.  Detalla  cómo  lo  harías,  tanto  en  la  parte  de  javascript  como  en  el  shader.  Trata 
de  ser  lo  más  especifico  posible  (cómo  modelarías  la  valla,  qué  variables  necesitas  para  la 
animación,  cómo  controlarías  el  tiempo,  etc). 

►  9.6  Estás  modelando  un  planeta  y  quieres  animarlo  haciendo  que  gire  sobre  sí  mismo. 
Quizá  lo  más  sencillo  sea  utilizar  una  transformación  de  rotación,  de  manera  que  el  ángulo 
de  giro  se  incremente  con  el  tiempo.  Propon  una  alternativa  a  utilizar  transformaciones  que 
consiga  el  mismo  efecto  visual  (de  que  el  planeta  gira  alrededor  de  si  mismo),  detalla  la 
respuesta  todo  lo  que  puedas  como  si  un  tercero  tuviese  que  implementarlo  a  partir  de  tu 
explicación. 
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Capítulo  10 


Procesamiento  de  imagen 
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Desde  sus  orígenes,  OpenGL  ha  tenido  en  cuenta  en  el  diseño  de  su  pipeline  la 
posibilidad  de  manipular  imágenes  sin  asociarle  geometría  alguna.  Sin  embargo, 
no  es  hasta  que  se  produce  la  aparición  de  los  procesadores  gráficos  programables 
cuando  de  verdad  se  puede  utilizar  OpenGL  como  una  herramienta  para  procesado 
de  imágenes,  consiguiendo  aumentar  de  manera  drástica  la  capacidad  de  analizar 
y  modificar  imágenes,  así  como  de  generar  una  amplia  variedad  de  efectos  (véase 
figura  [TÜ7T]). 


10.1.  Apariencia  visual 

10.1.1.  Antialiasing 

Se  conoce  como  esfecto  escalera  o  dientes  de  sierra,  o  más  comúnmente  por 
su  término  en  inglés  aliasing ,  al  artefacto  gráfico  derivado  de  la  conversión  de  en¬ 
tidades  continuas  a  discretas.  Por  ejemplo,  al  visualizar  un  segmento  de  línea  se 
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Figura  10.1:  Ejemplo  de  procesado  de  imagen.  A  la  imagen  de  la  izquierda  se  le  ha  aplicado  un 
efecto  de  remolino,  generando  la  imagen  de  la  derecha 


convierte  a  una  secuencia  de  píxeles  coloreados  en  el  framebujfer ,  siendo  clara¬ 
mente  perceptible  el  problema,  excepto  si  la  línea  es  horizontal  o  vertical  (véase 
figura|10.2|).  Este  problema  es  todavía  más  fácil  de  percibir,  y  también  mucho  más 
molesto,  si  los  objetos  están  en  movimiento. 

Figura  10.2:  En  la  imagen  de  la  izquierda  se  observa  claramente  el  efecto  escalera,  que  se  hace  más 
suave  en  la  imagen  de  la  derecha 


Nos  referimos  con  antialiasing  a  las  técnicas  destinadas  a  eliminar  ese  efecto 
escalera.  Hoy  en  día,  la  potencia  de  los  procesadores  gráficos  permite  que  desde  el 
propio  panel  de  control  del  controlador  gráfico  el  usuario  pueda  solicitar  la  solución 
de  este  problema  e  incluso  establecer  el  grado  de  calidad.  Hay  que  tener  en  cuenta 
que,  a  mayor  calidad  del  resultado,  mayor  coste  para  la  GPU,  pudiendo  llegar  a 
producir  cierta  ralentización  en  la  interacción  con  nuestro  entorno  gráfico.  Por  este 
motivo,  las  aplicaciones  gráficas  exigentes  con  el  hardware  gráfico  suelen  ofrecer 
al  usuario  la  posibilidad  de  activarlo  como  una  opción. 

Supersampling 

El  método  de  supersampling  se  basa  en  tomar  más  muestras  por  cada  píxel.  De 
esta  manera,  el  valor  final  de  un  píxel  p  se  obtiene  como  resultado  de  la  combina¬ 
ción  de  todas  sus  muestras.  Hay  que  definir  un  patrón  de  muestreo  y  también  se 
puede  asignar  un  peso  diferente  a  cada  muestra. 

n 

P(x,y)  =  '%2wic(i,x,y)  (10.1) 

2=1 

La  figura  [TÜ3]  muestra  un  ejemplo  del  funcionamiento  del  método  donde,  en 
lugar  de  utilizar  una  única  muestra,  se  utilizan  cuatro.  En  ese  ejemplo,  dos  de  las 
muestras  quedan  cubiertas  por  la  proyección  de  la  primitiva  gráfica  y  el  color  final 
del  píxel  es  el  valor  medio  ponderado  de  los  valores  obtenidos  para  las  cuatro 
muestras  realizadas. 
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Figura  10.3:  Ejemplo  de  funcionamiento  del  supersampling 


La  implementación  más  popular  de  este  método  se  conoce  con  el  nombre  de 
full  scene  anti-aliasing ,  FSAA.  Al  utilizar  esta  técnica  es  necesario  disponer  de  un 
framebuffer  cuyo  tamaño  sea  n  veces  mayor,  donde  n  es  el  número  de  muestras, 
ya  no  solo  para  almacenar  el  color,  sino  también,  por  ejemplo,  para  guardar  la  pro¬ 
fundidad  de  cada  muestra.  Este  método  procesa  cada  muestra  de  manera  indepen¬ 
diente,  por  lo  que  es  bastante  costoso,  dado  que  el  número  de  píxeles  se  multiplica 
fácilmente  por  cuatro,  ocho  o  incluso  dieciséis. 


Multisampling 

El  método  conocido  por  multi-sampling  anti-aliasing ,  MSAA,  se  basa  en  mues- 
trear  cada  píxel  n  veces  para  averiguar  el  porcentaje  del  píxel  cubierto  por  la  primi¬ 
tiva.  El  shader  de  fragmentos  solo  se  ejecuta  una  vez  por  fragmento,  a  diferencia 
del  método  full  scene  anti-aliasing ,  donde  dicho  shader  se  ejecutaba  para  cada 
muestra.  WebGL  2.0  implementa  este  método  (véase  figura|10.4|)  y  por  defecto  es¬ 
tá  habilitado.  En  el  caso  de  no  quererlo  hay  que  desactivarlo  de  manera  específica 
al  obtener  el  contexto: 

■  canvas . getContext ( "webg!2 " , { antialias : f al se } ) ; 


Figura  10.4:  Comparación  del  resultado  de  aplicar  MSAA  (izquierda)  y  no  aplicarlo  (derecha). 
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10.1.2.  Corrección  gamma 

Los  monitores  no  proporcionan  una  respuesta  lineal  respecto  a  los  valores  de 
intensidad  de  los  píxeles.  Esto  produce  que  veamos  las  imágenes  un  poco  más 
oscuras  o  no  tan  brillantes  como  realmente  deberían  observarse.  En  ciertas  aplica¬ 
ciones,  es  habitual  que  se  ofrezca  como  opción  al  usuario  poder  realizar  este  ajuste 
de  manera  manual  y  así  corregir  el  problema.  En  la  figura [TÜ3]  la  curva  CRT  gam¬ 
ma  muestra  la  respuesta  del  monitor  para  cada  valor  de  intensidad  de  un  píxel.  La 
curva  corrección  gamma  representa  la  intensidad  del  píxel  necesaria  para  que  el 
monitor  presente  la  respuesta  lineal,  representada  por  la  línea  recta. 


Figura  10.5:  Esquema  de  funcionamiento  de  la  correción  gamma 

Si  la  intensidad  percibida  es  proporcional  a  la  intensidad  del  píxel  elevado  a  7, 
P  =  /7,  por  lo  que  la  correción  gamma  consiste  en  contrarrestar  este  efecto  así: 


P=  (P 


(10.2) 


Esta  operación  se  implementaría  en  el  shader  de  fragmentos,  tal  y  como  figura 
en  el  listado  [TÜJ~1  (véase  ejemplo  clO/gamma.html).  La  figura  [HX6]  muestra  dos 
resultados  obtenidos  con  valores  de  gamma  1.0  y  2.2. 


Figura  10.6:  Ejemplos  de  corrección  gamma:  1.0  (izquierda)  y  2.2  (derecha) 
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Listado  10.1:  Shader  de  fragmentos  para  la  correción  gamma 


uniform  float  Gamma; 


void  main()  { 


vec3  myColor  =  phong  (n  ,  L ,  V)  ; 

float  gammaFactor  =  1.0  /  Gamma; 


myColor  .  r 
myColor  .  g 
myColor  .  b 


=  pow(  myColor  .  r  ,  gammaFactor); 
=  pow(  myColor  .  g  ,  gammaFactor); 
=  pow(  myColor. b,  gammaFactor); 


fragmentColor  =  vec4(  myColor,  1.0); 


10.2.  Posproceso  de  imagen 


En  esta  sección  se  consideran  algunas  técnicas  de  tratamiento  de  imágenes 
que  se  realizan  a  modo  de  posproceso  del  resultado  de  síntesis.  Por  ejemplo,  las 
imágenes  que  se  muestran  en  la  figura  |10.7|  son  el  resultado  del  mismo  proceso 
de  síntesis  y  la  diferencia  es  que,  una  vez  obtenido  el  color  del  fragmento,  se  ha 
realizado  alguna  operación  que  se  aplica  por  igual  a  todos  los  fragmentos  de  la 
imagen. 


Figura  10.7:  Ejemplos  de  posproceso  de  imagen 


10.2.1.  Brillo 


La  modificación  del  brillo  de  una  imagen  es  un  efecto  muy  sencillo.  Consiste 
en  escalar  el  color  de  cada  fragmento  por  un  valor  Brillo.  Si  dicho  valor  es  1, 
la  imagen  no  se  altera,  si  es  mayor  que  1  se  aumentará  el  brillo,  y  si  es  menor 
se  disminuirá  (véase  figura  |10.8|).  El  listado  |10.2|  muestra  el  código  que  habría 
que  incluir  en  el  shader  de  fragmentos  para  modificar  el  brillo  (véase  ejemplo 
el  0/postproceso.  html) . 
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Listado  10.2:  Modificación  del  brillo  de  una  imagen 
fragmentColor  =  vec4(miColor  *  Brillo  ,  1.0); 


Figura  10.8:  Ejemplos  de  modificación  del  brillo  de  la  imagen  con  factores  de  escala  0.9,  1.2  y  1.5 


10.2.2.  Contraste 


La  alteración  del  contraste  de  la  imagen  se  obtiene  como  resultado  de  mezclar 
dos  colores,  uno  es  el  color  obtenido  como  color  del  fragmento  y  el  otro  es  el  valor 
de  luminancia  media  (véase  figura  [1(19]).  La  variable  Contraste  se  utiliza  para  dar 
más  peso  a  un  valor  u  otro  (véase  listado [TÜ3] y  el  ejemplo  el 0/postproceso. html). 


Listado  10.3:  Modificación  del  contraste  de  una  imagen 
vec3  LumiMedia  =  vec3(0.5,  0.5,  0.5); 

fragmentColor  =  vec4  ( mix  ( LumiMedia  ,  miColor  ,  Contr aste  )  ,  1 . 0)  ; 


10.2.3.  Saturación 


La  saturación  es  una  mezcla  del  color  del  fragmento  con  un  valor  de  intensidad 
específico  de  cada  píxel  (véase  figura|10.IÜ|.  Observa  en  el  listado |T0~4| las  opera¬ 
ciones  habituales  para  modificar  la  saturación  que  se  pueden  encontrar  también  en 
el  ejemplo  clO/postproceso.html. 


Listado  10.4:  Modificación  de  la  saturación  de  la  imagen 

vec3  lumCoef  =  vec3(0.2125,  0.7154,  0.0721); 
vec3  Intensidad  =  vec3  (  dot  ( miColor  ,  lumCoef)); 

fragmentColor  =  vec4  (mix(  Intensidad  ,  miColor,  Saturación),  1.0); 


10.2.4.  Negativo 

Otro  ejemplo  muy  sencillo  es  la  obtención  del  negativo  de  una  imagen  (véase 
figura  10.11 ).  Únicamente  hay  que  asignar  como  color  final  del  fragmento  el  re¬ 
sultado  de  restarle  a  1  su  valor  de  color  original.  En  el  listado  |10.5|  se  muestra  el 
código  correspondiente  al  cálculo  del  negativo  del  fragmento. 
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Figura  10.9:  Ejemplos  de  modificación  del  contraste  de  la  imagen:  0.5,  0.75  y  1.0 


Figura  10.10:  Ejemplos  de  modificación  de  la  saturación  de  la  imagen:  0.2,  0.5  y  0.8 


Listado  10.5:  Negativo  del  fragmento 
fragmentColor  =  vec4(1.0  —  miColor  ,  1.0); 


Figura  10. 1 1 :  Ejemplo  del  resultado  del  negativo  de  la  imagen 
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10.2.5.  Escala  de  grises 


ra 


También  es  muy  fácil  la  obtención  de  la  imagen  en  escala  de  grises  (véase  figu- 
10. 12|).  Lo  más  sencillo  sería  asignar  como  color  final  del  fragmento  el  resultado 


de  la  media  de  sus  tres  componentes.  Sin  embargo,  lo  habitual  es  combinar  las 
componentes  de  color  con  unos  determinados  pesos  siguiendo  la  recomendación 
ITU-R  BT.709.  El  listado 


color  del  fragmento. 


10.6 


muestra  el  código  correspondiente  al  cálculo  del 


Listado  10.6:  Cálculo  de  la  imagen  en  escala  de  grises 

float  lum=  0.2 1 25 *  miColor  .  r  +  0.7 1 54*  miColor  .  g  +  0.072 1  *  miColor  .  b  ; 
fragmentColor  =  vec4  ( vec3  ( lum)  ,  miColor.a); 


Figura  10.12:  Ejemplo  del  resultado  de  la  imagen  en  escala  de  grises 


10.2.6.  Convolución 

La  convolución  es  una  operación  matemática  fundamental  en  procesamiento 
de  imágenes.  Consiste  en  calcular  para  cada  píxel  la  suma  de  productos  entre  la 
imagen  fuente  y  una  matriz  mucho  más  pequeña  a  la  que  se  denomina  filtro  de 
convolución.  Lo  que  la  operación  de  convolución  realice  depende  de  los  valores 
del  filtro.  Para  un  filtro  de  dimensión  mxnla  operación  es: 


n— Ira—  1  Til  1  Til 

Res{x ,  y)  =  Y  Y  Im9(x+(i -  —  2  ),y+(J-  •  Filtro(i,j)  (10.3) 

7=0  z=o 

Realizar  esta  operación  con  WebGL  requiere  que  la  imagen  sintética  se  gene¬ 
re  en  primer  lugar  y  se  almacene  después  como  textura  para  que  en  un  segundo 
dibujado  se  pueda  aplicar  la  operación  de  convolución  sobre  la  imagen  ya  gene¬ 
rada.  Por  otra  parte,  si  la  operación  de  la  convolución  sobrepasa  los  límites  de 
la  imagen,  se  utilizan  los  mismos  parámetros  que  se  indicaron  para  especificar  el 
comportamiento  de  la  aplicación  de  texturas  fuera  del  rango  [0,1]. 
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Las  operaciones  más  habituales  son  el  blurring ,  el  sharpening  y  la  detección 
de  bordes,  entre  otras.  La  tabla  10.1  muestra  ejemplos  de  filtros  de  suavizado  o  blu¬ 
rring ,  nitidez  o  sharpening  y  detección  de  bordes  (véase  figura|10.l3]).  El  ejemplo 
c  10/bordes,  html  incluye  una  implementación  de  este  último  filtro. 


1 

1 

1 

1 

1 

1 

1 

1 

1 

0 

-1 

0 

-1 

5 

-1 

0 

-1 

0 

-1 

-1 

-1 

-1 

8 

-1 

-1 

-1 

-1 

(a) 


(b) 


(c) 


Tabla  10.1:  Filtros  de  convolución:  (a)  suavizado,  (b)  nitidez  y  (c)  detección  de  bordes 


Figura  10.13:  Ejemplo  de  resultado  de  la  operación  de  convolución  con  el  filtro  de  detección  de 
bordes  en  la  parte  izquierda  de  la  imagen 


Ejercicios 


►  10.1  Entre  las  operaciones  típicas  para  el  procesado  de  imágenes  se  encuentran  las 
operaciones  de  volteo  horizontal  y  vertical.  ¿Cómo  implementarías  dichas  operaciones? 

►  10.2  Combina  la  operación  de  detección  de  bordes  junto  con  el  sombreado  cómic 
visto  en  la  sección [5^6|para  obtener  un  resultado  aún  más  similar  al  de  un  verdadero  cómic. 


10.3.  Transformaciones 

La  transformación  geométrica  de  una  imagen  se  realiza  en  tres  pasos: 

1.  Leer  la  imagen  y  crear  un  objeto  textura  con  ella. 

2.  Definir  un  polígono  sobre  el  que  pegar  la  textura. 
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3.  Escribir  un  shader  de  vértices  que  realice  la  operación  geométrica  deseada. 

El  paso  1  ha  sido  descrito  en  el  capítulo  [6j  Para  realizar  el  paso  2,  un  sim¬ 
ple  cuadrado  de  lado  unidad  es  suficiente,  no  importa  si  la  imagen  no  tiene  esta 
proporción.  En  el  paso  3,  el  shader  de  vértices  debe  transformar  los  vértices  del 
rectángulo  de  acuerdo  a  la  transformación  geométrica  requerida.  Por  ejemplo,  pa¬ 
ra  ampliar  la  imagen  solo  hay  que  multiplicar  los  vértices  por  un  factor  de  escala 
superior  a  1,  y  para  reducirla  el  factor  de  escala  debe  estar  entre  0  y  1.  Es  en  este 
paso  donde  también  se  debe  dar  la  proporción  adecuada  al  polígono  de  acuerdo  a 
la  proporción  de  la  imagen. 

Otra  transformación  a  realizar  en  el  shader  de  vértices  es  el  warping ,  es  decir,  la 
modificación  de  la  imagen  de  manera  que  la  distorsión  sea  perceptible.  Esta  técnica 
se  realiza  definiendo  una  malla  de  polígonos  en  lugar  de  un  único  rectángulo  y 
modificando  los  vértices  de  manera  conveniente  (véase  figura 1 10.14]). 


Figura  10.14:  Warping  de  una  imagen:  imagen  original  en  la  izquierda,  malla  modificada  en  la 
imagen  del  centro  y  resultado  en  la  imagen  de  la  derecha 

Como  una  extensión  de  la  técnica  anterior  se  podría  realizar  el  morphing  de 
dos  imágenes.  Dadas  dos  imágenes  de  entrada,  hay  que  obtener  como  resultado 
una  secuencia  de  imágenes  que  transforma  una  de  las  imágenes  de  entrada  en  la 
otra.  Para  esto  se  define  una  malla  de  polígonos  sobre  cada  una  de  las  imágenes  y  el 
morphing  se  consigue  mediante  la  transformación  de  los  vértices  de  una  malla  a  las 
posiciones  de  los  vértices  de  la  otra  malla,  al  mismo  tiempo  que  el  color  definitivo 
de  cada  píxel  se  obtiene  con  una  función  de  mezcla. 

Cuestiones  - 

►  10.1  En  el  método  de  antialiasing  Full-Scene  Anti-Aliasing  o  FS AA,  ¿cuántas  veces  se 
ejecutará  el  shader  de  fragmentos  para  cada  píxel  de  la  imagen  final?  ¿por  qué? 

►  10.2  Si  al  shader  de  fragmentos  que  estemos  utilizando  le  añadimos  la  corrección 
gamma  y  fijamos  un  valor  de  gamma  igual  a  1.0,  ¿cómo  crees  que  afectará  a  la  imagen 
final? 

►  10.3  Utilizando  GLSL  se  desea  implementar  un  filtro  de  suavizado  de  imágenes  me¬ 
diante  la  operación  de  convolución  y  tamaño  5x5.  ¿Qué  ocurre  cuando  al  aplicar  la 
operación  de  convolución  a  los  píxeles  de  los  bordes  de  la  imagen  se  intenta  acceder  a 
píxeles  que  se  encuentren  más  allá  de  las  propias  dimensiones  de  la  imagen? 
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►  10.4  Se  quiere  proporcionar  al  usuario  la  posibilidad  de  modificar  el  brillo  de  las  imá¬ 
genes  generadas  con  WebGL.  Se  implementa  un  método  en  dos  pasos  que  consiste  en 
dibujar  contra  un  FBO  en  el  primer  paso,  y  utilizar  este  resultado  como  textura  de  un  único 
polígono  que  se  dibuja  en  un  segundo  paso  ya  al  framebujfer  por  defecto.  ¿Qué  atributos 
por  vértice  se  han  de  proporcionar  a  la  hora  de  dibujar  este  único  polígono?  Indica  aquellos 
atributos  que  resulten  estrictamente  necesarios  y  justifica  la  respuesta. 

►  10.5  Imagina  que  deseas  modificar  el  brillo  de  la  imagen.  Durante  el  proceso  de  crea¬ 
ción  de  la  imagen  defines  en  el  shader  de  fragmentos  una  variable  uniform  que  contendrá 
el  factor  de  brillo.  Si  tu  escena  contiene  objetos  transparentes,  ¿qué  cuidado  has  de  tener  a 
la  hora  de  operar  con  el  factor  de  brillo? 

►  10.6  La  operación  de  convolución  no  se  puede  hacer  al  mismo  tiempo  que  se  obtiene 
la  imagen  sintética,  se  ha  de  realizar  sobre  la  imagen  sintética  completamente  calculada, 
¿por  qué? 
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